Join Jen Kramer for an in-depth discussion in this video Creating modal windows, part of Learning Bootstrap 2.
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.…
Released
10/12/2012- 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
Share this video
Embed this video
Video: Creating modal windows