Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating modal windows

From: Up and Running with Bootstrap 2

Video: Creating modal windows

A Modal window is a div that's actually embedded within your web page that appears on top of your page on a grayed background, and it looks kind of like a pop-up window. It's not a true pop-up in that it doesn't appear in a separate browser window. You may have seen this on many different websites. I'm here on the Bootstrap website, getbootstrap.com. I am on the JavaScript Tab, and I am on Modal over on the side. If you scroll down a little bit here, you'll see down here we have a link to a live demo.

Creating modal windows

A Modal window is a div that's actually embedded within your web page that appears on top of your page on a grayed background, and it looks kind of like a pop-up window. It's not a true pop-up in that it doesn't appear in a separate browser window. You may have seen this on many different websites. I'm here on the Bootstrap website, getbootstrap.com. I am on the JavaScript Tab, and I am on Modal over on the side. If you scroll down a little bit here, you'll see down here we have a link to a live demo.

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.

Up at the top of the page here is the text, click me! That is going to be our big button that we'll see on the web page. The rest of this will wind up being the Modal window. And you see here the button with the X on it will wind up being that little X that appears in the corner. We have some text that we'll be talking about what's going on in the window, and then down at the bottom, there's a button to close the window. So we need to get to styled-up, and we need to apply some JavaScript to make the window appear and disappear. So, if we hop on into Dreamweaver, here's all of the code here that I just described, here is the link at the top, and we'll apply quite a bit of styling, and JavaScript to that in a little bit.

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.

We're just going to give this a class of close. Now, for both of these buttons, the functionality behind them is exactly the same, and what that is is when they're clicked, the Modal window should go away. And there is an attribute that we can add that will make that magic happen and talk to the JavaScript, that is data-dismiss, and that is modal is the value. So, I need to add that to both of those buttons, data-dismiss="modal". There we go! All right! Now that that's all in place, let's style this link that's up here at the top of the page, the one that says click me! We'll go ahead and give that a style, we'll give it a class of btn for button because we want it to look like a button.

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.

And up here in the section, I'm going to give this a matching ID of launch. Remember, that the ID here for section, whatever it is that you call that, should then be called via pound that ID name within the href. Then last of all in the href area, I am going to add a data toggle, data-toggle="modal". And that will mean that it will call up the Modal window when this button is clicked, and that data-toggle will be talking to the JavaScript that makes that happen.

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.

So, this is something even though we're using JavaScript, it shouldn't detract from your search engine optimization results, and you now have everything you need to put Modal windows to work inside of your Bootstrap website.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 2
Up and Running with Bootstrap 2

32 video lessons · 20500 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 2.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.