Bootstrap 3 version of this tutorial
The tutorial below is based on Bootstrap 2.3. These are the tutorials based on the latest Bootstrap version:
Bootstrap 3 Modals;
Bootstrap 3 Modal with Remote Content.

Bootstrap – Modal

You might have never heard of Modals before but you will have seen them. Click here to see a demo of a simple Bootstrap modal.

A Modal can be used for different purposes:

  • To create a small window where regular users of a website log in
  • To show a larger version of the thumbnail image

In this tutorial (and the next two) we’ll look at the Bootstrap Modal and 2 popular uses:

  1. A lightbox to show larger images
  2. A contact/comment modal (with the PHP script so you can actually use it)

A Modal can be recognized by:

  • The user stays on the same web page but a small overlay (with an image, form or message) is shown
  • The user cannot simply ignore the overlay because the web page (also called the parent window) isn’t accessible as long as the overlay (or child window) is shown
  • The user must take some kind of action before being able to continue with the parent window

There are more uses for modals than those I mentioned here. If you want to know about other uses I can recommend the article Modal Windows in Modern Web Design by Mat Cronin.

Basic Bootstrap Modal

Below you can see the markup of a basic Bootstrap modal:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Modal header</h3>
  </div><-- end of header -->
  <div class="modal-body">
    <p>One fine body…</p>
  </div><-- end of body -->
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div><-- end of footer -->
</div>

What you can see is that the modal div contains three other div’s:

  1. The modal header
  2. The modal body
  3. The modal footer

Not all three elements mentioned above are necessary to create a modal. Usually you need the body and the header or the body and the footer. The header or footer will contain a button or some other element that will allow the user to close the modal. Actually most modals can also be closed with the Esc key on the keyboard or by clicking outside the modal window. But a visitor might not know this. So including a button or other element – that’s clearly meant to close the modal – in the header/footer is preferable.

The markup above actually gives the modal 2 close options. One can be found in the modal header and will appear as a X.  The other can be found in the modal footer and will appear as a button with ‘Close’ on it. As you can see in both the modal header and the modal footer the attribute ‘data-dismiss=”modal” ‘ is used. This attribute is necessary to actually close the modal when the button or X is clicked.

Take a close look at the classes attached to the modal div as well. The first one ‘modal‘ will style the modal with the CSS rules used in the Bootstrap style sheet for modals. We’ll take a closer look at the styling of Bootstrap modals later on in this tutorial. The second class ‘hide‘ ensures that the modal window isn’t already open. One of the most often asked questions on forums is why the modal window is already open when the web page is opened in as browser. The answer is that the ‘hide‘ class was not used. The last class ‘fade‘ will do what you already suspected: it will add a fade effect to the modal window.

The other attributes you can see in the markup (e.g. aria-hidden) are important for visitors  with disabilities who use  assistive technologies. Because this is out of the scope for this tutorial I will not go into this. If you want to know more about this I recommend searching for information on WAI-ARIA.

Trigger for Modal

Because a modal usually isn’t visible until the visitor clicks on something you also need a trigger to activate (= toggle) the modal. The trigger can appear as a button or a small image. The basic markup for a trigger is

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch modal</a>

A trigger is linked to a modal through the ID and href (in the markup above the modal has ID ‘myModal‘ and the trigger is linked to this modal with ‘href=”#myModal” ‘). You should choose your own ID for your modals but make sure that it matches with the trigger.

A trigger will only open a modal window if it’s correctly linked to a particular modal through the ID and because the trigger contains ‘data-toggle=”modal” ‘.

Changing the style of the modal

None of the Bootstrap Theme Generators will provide you with options to specifically style Modals. So we need to dive into the CSS rules to do this.

Changing the backdrop

The backdrop is what covers the main window. You might want to change the color and/or opacity of the backdrop:

.modal-backdrop {
  background-color: #000000;
}
.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

If you change the opacity value to a lower value (e.g. 0.2) the backdrop will become more transparent.

Position and color of modal

These are the CSS rules used for the style of the modal:

.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1050;
  width: 560px;
  margin-left: -280px;
  background-color: #ffffff;
}

Changing the background-color above will only influence the modal header and modal body.

If you want to change that of the modal footer as well this is the CSS rule you need:

.modal-footer {
  background-color: #f5f5f5;
}

In the demo I wanted to change the background color of the modal header. Not that of the modal body as well. For this I used:

.modal-header {
   background-color:#C33;  
}

Because the default font-color doesn’t provide for a good contrast on a red background I also had to add the ‘color: #fff’ to get a white font for the modal header in the demo:

.modal-header h3 {
   color: #fff;
}

Necessary JavaScript files

The Bootstrap Modal requires the Bootstrap JavaScript file to function. And that script requires jQuery. So we need to insert this before the closing body tag in our file:

<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>

With text in the modal body a Bootstrap modal is a bit like a large tooltip. The differences are:

- the user controls when the modal window opens and closes.

- we can insert more and other  kinds of information in a modal.

Now that we know how to create a basic modal it’s time to look at more interesting uses (in the next tutorials).

 

These are the Bootstrap tutorials in this series:

The first and last Bootstrap tutorials will always show a complete and updated list of the Bootstrap tutorials on my weblog.