Bootstrap Modals

Description

Bootstrap Modals are created using a custom jQuery plugin. They can be used to enhance user experience with modal windows or add practical features for users. You can use Popover and Tooltip plugins within Modals.

In this tutorial, we will discuss how to create modal windows using Bootstrap through some examples and explanations. We will also cover various available options for customization.

What is Required

You need jQuery, Bootstrap CSS, and the JavaScript file bootstrap-modal.js. This js file is located in the js folder within your downloaded Bootstrap main folder.

jQuery is located under your Bootstrap main folder in docs > assets > js, named jquery.js. Alternatively, you can directly download jQuery from https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.

What Do Bootstrap Modals Look Like

The following example demonstrates what Bootstrap Modals look like.

Using Bootstrap Modals in Your Website

The following example demonstrates how to use Bootstrap Modals in a web page. Note that you do not need to write any JavaScript code. Explanations are provided after the example.

Example

<div class="container">
    <h2>Creating Modals with Bootstrap</h2>
    <div id="example" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>This is a Modal Title</h3>
        </div>
        <div class="modal-body">
            <h4>Text in the Modal</h4>
            <p>You can add some text here.</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-success">Activate</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch Demo Modal</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>

Explanation

The following table explains the code above. It will help you understand how to use Bootstrap Modals.

Using JavaScript

You can implement a Bootstrap modal window using JavaScript by simply calling the modal() function in your JavaScript. Your code should look like this, and you can reference it before the closing </body> tag.

$(function () {
  $("#identifier").modal();
});

Here, identifier is a jQuery selector used to identify the relevant container element. Next, let's look at the available options.

Options

Here are some options you might use to customize the appearance and feel of the modal window with modal().

backdrop

The backdrop option includes a modal-backdrop element.

If you replace the code on line 2 in the "Using JavaScript" example with the following code, setting the backdrop option to false, there will be no modal-backdrop.

{ $("#example").modal({backdrop: false});

keyboard

The keyboard option closes the modal window when the escape key is pressed. It is of boolean type and defaults to true. If you set the keyboard option to false, the modal window will not close even if the escape key is pressed.

If you replace the code on line 2 in the "Using JavaScript" example with the following code, setting the keyboard option to false, the modal window will not close when the escape key is pressed.

{ $("#example").modal({keyboard: false});

show

The show option displays the modal window upon initialization. It is of boolean type and defaults to true. If you set the show option to false, the modal window will not be displayed upon initialization.

If you replace the code on line 2 in the "Using JavaScript" example with the following code, setting the show option to false, the modal window will not be displayed upon initialization.

{ $("#example").modal({show: false});

Methods

Here are some methods used with modal().

.modal(options)

This method activates the content as a modal. You can reference an optional object-type options parameter. If you add the following code before the </body> tag in the first example of this tutorial, there will be no modal backdrop element.

$('#example').modal({
  backdrop: false
})

.modal('toggle')

This method manually toggles a modal. If you add the following code before the </body> tag in the first example of this tutorial, you can manually toggle the modal.

$('#example').modal('toggle')

.modal(show)

This method is used to manually open a modal. If you add the following code before the </body> tag in the first example of this tutorial, you can manually open the modal.

$('#example').modal('show')

.modal(hide)

This method is used to manually hide a modal. If you add the following code before the </body> tag in the first example of this tutorial, you can manually hide the modal.

$('#example').modal('hide')

Events

Below are the events related to modals. These events are used to intercept and execute your own code.

show

This event is immediately triggered after the show instance method is called.

shown

This event is triggered after the modal is displayed and the CSS transition is complete.

hide

This event is immediately triggered after the hide instance method is called.

hidden

This event is triggered after the modal is hidden from the user and the CSS transition is complete.

Click here to download all the HTML, CSS, JS, and image files used in this tutorial.