7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.6 Modal Windows

Welcome back. In this lesson, I'll show you how to use modal windows. Now if you're not sure what a modal window is, well it's simple. It's one of those windows that show up on a darker semi-transparent background. And you either have to click on a close button or you just click outside it to to close it. So the markup is pretty straightforward. You start with a div, with a class of modal. You give it an ID. Let's say modal-1. And then, you would give it a, a tabindex of minus 1, so we can't tab through its contents and a role of dialog. And this is just to help with accessibility. Next inside it's the actual modal dialogue. So you need to create a div with that class. After it, you have a div with a class of modal content. And I notice is, lots of markup but it's necessary in order to properly style it. Now inside modal content you have three sections basically. The header, the body and the footer. So let's start with the header. modal-header. This will usually contain the close button and the title. So the close button is gonna be a button, and it's gonna have a class of close. The content is gonna be the time's symbol, which is an X and another attribute that we gotta set is data-dismiss modal. Basically we're telling the button to close a modal window like this. And it's always gonna close its parent window. Next is the title. So, I'm gonna use an h4, with a class of modal title. Of course you can use any type of heading you want, and then modal title. Okay, if we refresh, we can't see it yet because it's a modal window, it only appears when triggered. So, let's create the button that will actually trigger it. I'm gonna place it right here. I'm gonna say button type. It's gonna be button. We can leave this out if you want. class, let's set a btn, btn-primary and then data toggle. This is very important. Set to modal so it will toggle a modal window. And then data-target is gonna target the ID of my modal window, which is modal-1. Yeah, the one that we put right here. And for text, I'm gonna say demo modal. Refresh. And when I click it. There it is. That's the modal window. Click and close it. Okay. Now we did the header. Next is the modal-body, in which I'm just gonna some lorem ipsum text, and then it's the modal-footer, which contains pretty much anything you want but in my case, I'm just gonna put two buttons. So, I'm gonna have an anchor tag with a class of btn, and btn-default times 2. Yeah, one of them is gonna say close, and for this one I'm gonna add data-dismiss equals modal. Just like I did on this button. And this one is the primary. And I'm just gonna say save. 'Kay, let's refresh. Close, Save. [BLANK_AUDIO] And this is basically how you do a modal window. If you wanted to fade in when it's being shown, simply add the class of fade to modal. So now it has this nice fade-in effect. If you want a bigger or a smaller modal window, you have two classes that you can use. The first one, and you need to add it right here to modal-dialog, the first one is modal-lg, which is a large, and the size refers to the width of the modal window. And the second one is modal SM or small. [BLANK_AUDIO] And this is a very narrow modal window. Now, in Bootstrap 3 modal windows are acting very well on smaller screen sizes. So, if I resize my page here and I click on the modal. Notice my modal window resizes automatically. So resize again. And there it is. Pretty cool, right? So there you go. With a few simple classes and some data attributes, you can create working modal windows very fast. Now, for the final theory lesson, I wanna show you two more components, the Carousal and the Collapse elements. That's up next.

Back to the top