Modal

Hi

I'm having difficulties in displaying the modal. How do you do it ?

Do you just place it into where you want it or is there something specific you need to do.

When I drag it into where I want it, how does someone then activate it for it to display.

Please just give me a rundown on how to.

Thanks

Quintin

Hi, you can use jquery and id's to trigger the button. Make an id for the button and another for the modal and then create a JavaScript and add this code

I'll have to play with this again and see if that works for me too. I wracked my brains and the brains of a couple others trying to get a modal window to work a few weeks back and couldn't do it and finally gave up lol. Hopefully the above is what I was missing. Thanks for sharing.

http://getbootstrap.com/javascript/#modals

"Modal markup placement - Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality."

Starting from a clean slate this is what I did to make it work.

  1. Drag modal component on to Body element in the Overview pane.
  2. Select Modal component in the Overview pane
  3. Click HTML pane
  4. Click ATTRIBUTES pane
  5. Type into ID field "modal1" click apply
  6. Download my "Basic Modal Button" component
  7. Drag "Basic Modal Button" component where you want the button

That will get the modal to work in preview mode

To see the modal to edit it.

  1. Select modal component in the Overview pane
  2. Just above the Layout View pane in the toolbar click on the Modal "Show" button

When done click the "Hide" button to return to normal state

Saj

Thank you, Saj!

Thank you Saj!

“Modal markup placement – Always try to place a modal’s HTML code in a top-level position in your document to avoid other components affecting the modal’s appearance and/or functionality.”

That fixed my modal problem immediately, THANKS!!

You're welcome, glad I was able to help people from the future :)

Saj

The program really should support a simple way of triggering the modal through a button or link. Has anyone suggested this in the requested features thread?

The program really should support a simple way of triggering the modal through a button or link.

Has anyone suggested this in the requested features thread?

it's already simple and well documented.

https://www.w3schools.com/bootstrap4/bootstrap_modal.asp

https://getbootstrap.com/docs/4.1/components/modal/

marrco, respectfully, if it's not explained in the PROGRAM'S documentation, then it's not "well documented." Granted, this is easy enough to figure out for most people who know their way around markup or writing javascript, but the program should have a simple way to click on the modal and choose the item on the page that will trigger it (button, text link, image, etc...)

Good point, but I think you're still plain wrong.

BSS is a tool for developers, I mean people earning a living creating and selling professional websites. And willing to pay for many tools to help their job. BSS is just a small part of their workflow.

People that can't code html/css/bootstrap should let a real developer create their website.

BSS documentation clearly explains how to add attributes to a tag. That's all you need. If you think that tons of options to click through are they way pros do they $DAYJOB you're plain wrong. Lately BSS if adding useless features and not fixing real issues that create problems for people using it every day for their customers.

If you're not able to MANUALLY create a modal and link it to a button the solution is not to ask for point and click feature to do that. But to study bootstrap, html and CSS. If you know your job then Bootstrap Studio will help you do more in less time. Unless it gets cluttered with dumb options appealing only to newbies and still missing important features that devs use every day.

BTW I still think that people with no basic html/css experience writing here for help often steal their software. There's no reason for an amateur to buy BSS just to play with a single website. So my guess is that many of dumbing-down requests probably are from thieves, not from legit paying user.

Wow, aren't you just full of yourself? Good thing you're not in charge of marketing Bootstrap Studio!

Unless I'm mistaken, this program is a tool for ANYONE WHO BUYS IT - including developers, experienced coders, amateurs, beginners, designers, and anyone else who wants to work with Bootstrap. The program is FULL of "one-click" shortcuts to make it easy to do things that would normally have to be coded in steps. In fact, that's the basic premise of the program, otherwise why bother with it? You might as well just use a text editor to build your site.

I also own a program called Pinegrow, which is considerably more advanced than Bootstrap Studio, and even more targeted towards experienced devs and coders who want to save time, and that program includes a very simple "one-click" way of assigning a modal trigger to whatever element a person selects.

As for your opinions about inexperienced people being "thieves," "dumbing-down requests," "newbies," etc... I'll just file those under "verbal diarrhea." Oh, and apparently you seem to have forgotten that the only way you can register for these forums is with the email address you used to PURCHASE the program.

@Printninja you cried for help and I just showed how to solve your problem. My mistake, from now on I'll stop helping you.

have a nice day

apparently you seem to have forgotten that the only way you can register for these forums is with the email address you used to PURCHASE the program.

That's true (if it is) from a really short time.

But all the free users (students) still can register. So it's not only people who purchased the program. But even now many just got it for free write in the forums. Let's hope Martin will verify old users too and also differentiate free from paying users. I guess that people spending their money on this software will have in general different needs. Ability to add a   or a comment inside a css o html without using components is a much more needed feature that an easier way to link buttons to a modal. That IMHO would only clutter the interface and make overall website building slower.

This was my original comment...

The program really should support a simple way of triggering the modal through a button or link. Has anyone suggested this in the requested features thread?

Hardly a "cry for help." In fact, it was just an observation, since I knew how to trigger the modal before you explained it.

Adding a simple third button next to the Modal "show" and "hide" buttons that said something like "select trigger" would not clutter the interface at all. There's even enough room for a fourth button that could say, "hide "select trigger" button if select trigger button triggers you."

you also wrote

choose the item on the page that will trigger it (button, text link, image, etc…)

so you want a button that lists ALL button, text link, images, etc. where a user can select one or multiple items. And that must be placed on the modal and not on the triggering element? And in the same way, hundreds of new buttons and options could be added to the interface!

A long-standing request is for support of an external editor (like Atom) or at least for a better internal editor with emmet like capabilities where a developer can just write: button ... class ... type .. data-toggle... without switching from the keyboard to the mouse, clicking in a few different places in the interface and then back again to the keyboard. That would make coding faster!

For me, your idea is wrong also because when selecting an element (modal) and modifying it you should NOT be allowed to set properties to a different element (button). Buttons trigger modals. Not modals are triggered by buttons.

And right now (well, after moving your hand from the mouse to the kbd and back a few times) when you add a button you can add data-toggle and data-target attributes and values. Not fast, but at least the option is in the right place.

What could be added to BSS is that when a user clicks on a new attribute a dropdown (data-toggle, data-target ..) id offered, and when you start typing you can complete the selected attribute with tab key. But that option is already present in Atom and most code editors. And that's a long time requested feature to support external HTML editors or at least add autocompletion and emmet style features. See https://bootstrapstudio.io/forums/topic/class-lead-and-display-1/

Very simple. This is how it's handled in Pinegrow, which (compared to BSS) is a considerably more sophisticated/powerful, "developers" type of program.

enter image description here

why do you user BSS when you own Pinegrow that's really a different beast, much more expensive -and no free student license- and aimed at a different target?

I'm not a student. I own a website design company, and we use many different programs depending on the task at hand. We have some developers working for us who want to build their sites in specific programs, and we also have clients who sub work out to us that they want done in specific programs. We also evaluate software to see if it can be beneficial to our workflow.