Bootstrap 3 Modals

The Bootstrap 3 modals are described on the website as “streamlined, but flexible, dialog prompts”. A basic modal is a large box that’s displayed when someone triggers it (usually with a button), provides information and then asks to make a choice.
Although in my opinion the information on the Bootstrap website has improved with the launch of version 3 there are still things that can easily lead to confusion. I hope this tutorial will clarify those issues.

Basic Modal

A basic modal requires two elements:

  1. the modal itself.
  2. a button to trigger the modal.
DEMO - A basic modal

The Bootstrap website first provides the markup for a modal without the trigger button and then the markup for the combination of those two. Because you’ll likely start your first coding of modals with the latter I’ll focus on that.

Parts of a modal

A modal usually consists of several parts:

  • A header
  • The body with the information you use for the dialog
  • A footer area where the buttons are located that a users needs to react to the information

Mostly a user cannot continue on the web page without having reacted to the modal.
Bootstrap 3 uses a slightly different markup for the modal then in the previous version:

With this markup the modal will not show when the web page is opened. A user first needs to trigger it. In the previous version you had to insert the class ‘hide’ to prevent the modal’s immediate display. Quite a few questions on fora had to do with people forgetting to insert the ‘hide’ class and not understanding why the modal was shown directly. Fortunately in this version ‘hide’ has become the default state.

The markup provides a user with a button to close the modal and a button to save changes. Apparently Bootstrap developer’s impression is that often the user has to insert a response and not just read something. If that’s not the intention of your modal you can change it or delete this button’s markup. You’ll need to add a PHP script if you do want the users input to be saved.

There are more ways for a user to close the modal. In the header you see “class=’close’ “. This is often used to style a close-option with a close-symbol displayed at one of the corners of the modal. The demo of a basic modal above also displays an ‘x’ in the top right corner. 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.

The Bootstrap website also provides a short explanation about the inclusion of attributes like “role=’dialog’ ” ‘area-labelledby’ etc. If you want to know more about this I recommend to ‘google’ for information about WAI-ARIA.

The trigger

Until now we don’t have a trigger in our markup for the modal:

I prefer adding the code for this separately. The combination shown on the Bootstrap site might falsely give the impression that they need to be together in the markup of a web page. But you insert the trigger markup where it’s needed in the contents of a page. The markup for the modal can be inserted anywhere else. And you might have good reasons to insert it outside the flow of the document.

You’ll recognize most of the markup for the trigger as that of an ordinary button. Specifically inserted for the modal are:

  1. ‘data-toggle=”modal” ‘. This stand for a script that displays the modal (when it’s not shown) and hides it (when it’s state is ‘show’). This is one of the jQuery methods: toggle is used to check the actual state of an element ( hidden or shown) and conditional on that state do a thing (show or hide). In one of the other jQuery tutorials I will tell you how this works and you can use it to write your own scripts.
  2. ‘data-target=”#myModal” ‘. This ID links the trigger to the modal. If the ID´s don´t match the modal won´t launch. So whenever you copy markup make sure they are the same in the modal and the trigger. If you want to trigger several modals with one trigger you could also use a class (will probably look a bit crowded though). If you need more than one modal on a page you use the ID’s to link the triggers to their respective modals.

Options

There are 4 options for Bootstrap modals:

Backdrop

The backdrop is the layer you see around a modal. This is used to prevent the user activating any other element on the page before replying to the modal. The default modal closes when a user clicks on one of the buttons in the footer area. But you can set this to ‘static’ if you do not want the backdrop to close.

Keyboard (Esc)

Above I explained that a user can also click on the Esc key to close a modal. If you have a particular reason to prevent this you can set this option to false. To do this for one particular modal use data-keyboard="false" and insert this in the markup for the modal where it says id="myModal"

Show

With the explanation already given above about why the default for modals is now set to “show” instead of “hide”.

With the option ‘show’ the modal will show directly on loading the page.
DEMO - Modal shows on opening page

href attribute

The href attribute is mentioned twice on in the explanation for modals on the Bootstrap site. This is one of those bits that might lead to confusion in my opinion.

Firstly it’s part of the markup shown for the button trigger (in the combination markup). Here it links the button to a specific modal.

Secondly it’s discussed as an option. I find this information more useful. You can use this option to have a modal display remote information in the modal.

Because an explanation of this option is a bit complicated I’ll treat that subject in the tutorial Bootstrap modal with remote content.

2 comments

Carla - December 25, 2013 Reply

I am just wondering if the id=”myModal” needs to be used, or are you able to rename it to something like myModal2 for instance. If so what other items would the name change affect?

Theo - December 26, 2013 Reply

Hello Carla,

yes you can change the ‘myModal’ into something else, like ‘myModal2’ or any other ID-label you prefer to use (e.g. ‘christmas’ or ‘different’). Just make sure that when you use for instance id=”myModal2″ you also change the ID-label in the trigger to data-target=”#myModal2″ (see the explanation below the heading ‘The Trigger’ and especially bullet 2) and if you use a script (see below heading “Options” the item about ‘Show’) then there too. If you use WAI-ARIA you should also change aria-labelledby=”myModalLabel” (see line 2 in the Modal markup) into aria-labelledby=”myModal2Label” to avoid confusion for users with assistive technologies.

Add your comment

Related Posts