New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Up and Running with Bootstrap 2
Illustration by

Creating modal windows


From:

Up and Running with Bootstrap 2

with Jen Kramer

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Up and Running with Bootstrap 2
2h 38m Beginner Oct 12, 2012

Viewers: in countries Watching now:

Bootstrap is a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun. Author Jen Kramer explores its 12-column grid layout; typography and icon libraries; fully functional components like nav bars, buttons, and tabs; and much more. This course also shows how to add JavaScript extras like dropdown menus, modal windows, and photo carousels.

Topics include:
  • 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
  • Making the nav bar responsive with JavaScript
  • Adding dropdown menus to the nav bar, tabs, and pill
Subjects:
Web Responsive Design Web Design Web Development
Software:
Bootstrap
Author:
Jen Kramer

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.

Find answers to the most frequently asked questions about Up and Running with Bootstrap 2.


Expand all | Collapse all
please wait ...
Q: I am trying to create the image carousels shown in this course, and they are not functioning properly. The custom.css file seems to be missing from the exercise files and I think this is the reason. Can you provide it?
A: custom.css isn't created until the carousel indicators are added. However, these styles have to do with the way the indicators look, and nothinghas to do with the way the carousel functions.
 
Are you sure you're working with Bootstrap 2.x? You download that from here: 
http://getbootstrap.com/2.3.2/. The carousel changed radically between Bootstrap 2.x and Bootstrap 3, and this course might not work with version 3.
 
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.
Upgrade now


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 Upgrade now

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.