Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding the difference between default and fluid grids
- Nesting with fluid grids
- Creating a thumbnail gallery
- Adding block quotes and lists of text
- Incorporating images and icons
- Adding breadcrumb navigation and pagination
- Using tabs and pills navigation
- Adding dropdown menus to the nav bar, tabs, and pill
Skill Level Beginner
If you click this big button here that says Launch demo modal, you'll see how the screen grays back a bit, and this window seems to scroll in to place. The window is comprised of three parts, we have a heading up here on the top with a little Close button over here on the side, the little X. There is some main text here to keep the Modal window that's very long from scrolling off the web page. You see there's a scrollbar here on the side. Then down at the bottom, we have a button to close the window or a button to save changes.
The Save Changes button may be a little bit distracting to you because you're wondering what can you possibly change within this window? And you'd be correct, there's nothing in that window you can actually change. However, if this window was hooked up to a database, you might be able to make some changes within a Modal window and save those changes. Many content management systems use a feature like this. All right! I am going to close that. I am going to close my tab. And this other tab is our modal.html file, which is in your exercise files. This is our starting point here for how this is going to be laid out.
Then I have a section here for the web page. The section is comprised of three parts. There's a header which contains that little X button as well as the heading. We have some text that describes the event. This is just the blah-blah that's there inside of the window, and then down at the bottom, we have the footer with the Close button. So, I am going to walk you through how we're going to set up the styling for this. First of all, starting up here at the top with the header, we are going to give this a class of modal-header. I am going to wrap a div around the text here that's in the middle.
I am going to give that div with a class of modal-body. We'll tab these over a little bit. Make the code a little easier to read. And I'll close the div down here. Then of course, for the footer, we'll give it a class of modal-footer. So, there we go! We've identified the three sections of our Modal window, a header, a body, and a footer.
So that's all in place. Now, let's apply some styling to the buttons. So, the button down here at the bottom, the Close button, I need to give this a class, and I am going to give it a class of button, btn, and styling of these buttons I covered in an earlier video in the CSS chapter. I want to make this button blue. So, I'm going to give it another class of btn-primary, which will give it a lovely blue color. For the button that's further up on the page here, the little X, we'll do something slightly different.
Just to be different, let's give it a class of btn-warning, which is going to make it a lovely shade of orange. And I also want it really big, so let's give it a class of button-large. So, that starts off with the styling there. The next thing I need it to do is make sure that when the button is clicked that something happens to this whole section that contains the Modal window information. And the way to do that is to change the href here from just the pound sign to something like launch.
Finally, let's add a little bit of styling here to the section. So, we're going to give this a class of modal. That's going to control the appearance and disappearance of the window. We'll also give it hide and fade. Hide and fade will help drive that nice slide as it comes in and as it goes away again. All right! Now that we've got all of that in place, go ahead and say Ctrl or Command+S to save, and off to Firefox, just hit your Refresh button. And you'll see that we have a big orange button that says click me! on this page.
Go ahead and click it. Lo and behold, here comes your Modal window exactly as you would expect it to appear. Notice that when I click the Close button at the bottom, it goes away, and the screen comes back to full brightness. If I click this again, I can click the little X in the upper right-hand corner, and it behaves exactly the same way as the Close button. So Modal windows maybe very helpful to you. They're nice for search engine optimization because all of the text that's within that Modal window is available to search engines to read as opposed to a pop-up window which is a separate HTML document.