O'Reilly logo

Bootstrap Essentials by Snig Bhaumik

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Modal windows

Modal windows is perhaps one of the most widely used custom component. The days of standard JavaScript alert and prompts are gone; you should implement custom modal windows in order to interact with the user.

Bootstrap offers a rich set of functionality and features that would suit almost all requirement variations around modal windows.

Basic modal window

Here is the most basic version of a modal window:

Basic modal window

Here is the code to create it:

<div class="modal" id="theModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required