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