Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Dialogs in Bootstrap Demo
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
So let's jump right into code and see modals in action. I'm over here at getbootstrap.com in the modals section.
0:10
So we can scroll down here and see some examples. So, here is this simple static example, here is a little dialogue,
0:16
the styles are not over done on it, it's really kind of unstyled but it has a title at the top, it has as much content as you want to put in the body
0:25
and then at the bottom it has a footer with the "close" and "save changes". And in order to do that, we've got to put a couple of things together here,
0:32
we've got to put this section, this modal dialogue, with the fade option, role dialogue and then here we can see
0:39
we have the header and you can put whatever you want there, you have the body, alright, this is just standard HTML that fits into the container,
0:45
whatever size that is and then at the bottom, we've got our two buttons, one has the data-dismiss modal and one is just standard button
0:53
that we could hook some kind of event, submit a form, whatever. The other thing that we're going to need to do to show the dialogue
0:59
is we're going to actually have to trigger it. Now here we have a button, but this just as well could be a hyperlink,
1:06
which will then trigger that. It's possible that almost anything can trigger it, certainly buttons and hyperlinks even if they are styled as buttons,
1:14
will do it and the reason it will do it is it says data-toggle="modal" and so that's going to toggle the modal,
1:21
and then the specific dialogue it's going to target, this is a CSS selector #myModal so id myModal, which is right here.
1:30
So these two things are linked together by that CSS selector by the id. Let's look at this in action.
1:36
Well, first of all, we can click it here, and it comes up looking like so. Alright, let's look at it in our code.
1:43
So over here, I've got something very similar to what you just saw, in fact, the id may look really familiar.
1:49
So here we have a button, and it has some kind of "buy now" button, and suppose for whatever reason that makes sense for us,
1:55
that showing the dialogue with the details to buy a thing rather than leaving the page is what makes sense for us.
2:01
And so we've implemented that dialogue down here, notice, it is still within the body, and just like you saw before,
2:09
we've given it the right id, modal fades will fade in instead of just appear, and there is a role="dialogue".
2:18
And then we have the various pieces, the header, the contents, and the bottom. Over here, we can click on this, and see what happens,
2:25
so here is our "buy now" hyperlink, click it, and because it's got that toggle... that data toggle modal thing,
2:33
it's going to click and show this particular dialogue, and now notice, this one doesn't close,
2:39
this button doesn't have the data-dismiss, but this one does, right. The same is with this little x up here and in fact if you click
2:46
anywhere outside, it also closes the dialogue. It's worth noting it doesn't actually destroy it, so if there was some contents in there,
2:53
like if over here we had some kind of input like here, and I click away,
3:02
and I click back, that input is still there, so in case you accidentally close it,
3:05
it's not like everything is lost, it will reappear the way it appeared before.
3:10
So that's how these modal dialogues work, they are very easy to work with. Just there is a lot of pieces, there is a lot of nesting here,
3:16
you've got modal, modal dialogue, modal content, modal header etc, so just be really careful to not mess up what goes where, right,
3:26
so you want to balance your HTML tags, don't leave an unclosed div or paragraph or whatever, because that's going to mess up the dialogue
3:35
and it can cause all sorts of weird problems like one example I had messed up, I missed some kind of closed tag and the dialogue would show
3:42
but it would never go away. Or it would show and it there were like cycle showing over and over, it was very bizarre.
3:47
So as long as you're careful about and make sure you close everything and it's well-formed HTML, you are in good shape.