pdf icons

Bootstrap Modal Tutorial

The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive.

Modal windows can be used to display alert, videos, and images on a website.

The Bootstrap Modal is divided into 3 primary sections:

  1. Header
  2. Body
  3. Footer

Each has its own significance and hence should be used properly.

The Default Modal

The default Bootstrap Modal as shown in diagram 1.

Diagram 1

To trigger the modal, add a link or a button as shown in codespec 1.

  <a  href="#" class="btn btn-lg btn-success"  data-toggle="modal" data-target="#basicModal">Click to  open Modal</a>

Codespec 1

The link element has 2 custom data attributes:

  1. data-toggle – tells Bootstrap what to do
  2. data-target – tells Bootstrap which element is going to open.

So whenever a link like that is clicked, a modal with an id of “basicModal” will appear.

Now let’s see the code required to define the modal itself as shown in codespec 2:

<div  class="modal fade" id="basicModal" tabindex="-1"  role="dialog" aria-labelledby="basicModal"  aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">

 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
 <div  class="modal-body">
 <h3>Modal Body</h3>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>

The parent div of the modal should have the same id as used in the trigger element above.

In our case it would be id=”basicModal”.

NOTE: Custom attributes like aria-labelledby and aria-hidden in the parent modal element are used for accessibility.

In the modal’s HTML, a wrapper <div> nested inside the parent modal div. This <div> has a class of modal-content that tells bootstrap.js where to look for the contents of the modal.

Inside this <div>, we need place the 3 sections as mentioned earlier:

  1. Header,
  2. Body,
  3. Footer

The modal header, as the name implies, is used to give the modal a title and some other elements like the “x” close button. This should have a data-dismiss attribute that tells Bootstrap which element to hide.

In the modal body add any kind of data inside the body, text, form, image(s) and video(s).

In the modal footer place action buttons like “Save“, “Close“, “Accept“, that are associated with the action the modal is displaying.

Once complete you can run the modal in your web page.

Click to download our modal window example

We have showed our team as an example for modal windows as shown in diagram 2.

Diagram 2

Click on any of the buttons below the team person’s image and a modal window will be displayed as shown in diagram 3.

Diagram 3

Modal Window example was crafted using HTML5 and CSS3 and where necessary the bootstrap JavaScript is used as well.

All work together in perfect harmony to deliver several – unique looking – webpage.

If you are a competent HTML5 / CSS3 / -JavaScript programmer we are sure you will be able to change the code of the web page modal window we’ve written to make the code snappier and perhaps a tad shorter.

Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an Email and we’d be happy to put up your code spec for download via our website.

Should you have any queries about the Modal examples code do post these in the Bootstrap 3 section of the Opensourcevarsity forum.

We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you.

Click to download our modal window example


September 9, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved