Bootstrap Modal |

Bootstrap Modals（Modal Box）

Bootstrap Modals（Modal Box）is created using a custom Jquery plugin. It can be used to create modal windows to enrich user experience, or to add practical functions for users. You can use Popover (pop-up box) and Tooltip (tool tip plugin) in Modals (modal box).

In this tutorial, we will discuss how to create modal windows with Bootstrap through some examples and explanations. At the same time, we will also discuss various available options for customization.

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

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

The following example demonstrates what Bootstrap Modals (modal box) looks like.

The following example demonstrates how to use Bootstrap Modals (modal box) on web pages. Please note that you do not need to write any JavaScript code. Relevant explanations are attached after the example.

Example

View Bootstrap Modals (modal box) example online

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

Code	Explanation
div id="example"	The id assigned to the relevant div, the value of the id points to the JavaScript that implements modal (modal box) later.
class="modal hide fade in"	Four classes of Bootstrap CSS - modal, hide, fade and in, used to set the layout of modal (modal box).
style="display: none;	Used to keep the modal window visible until triggered (such as clicking the relevant button).
<div class="modal-header">	modal-header is a class applicable to define the style of the modal window title.
a class="close"	CSS class close is used to set the style of the modal window close button.
data-dismiss="modal"	data-dismiss is a custom HTML5 data attribute. Used to close the modal window.
class="modal-body"	modal-body is a CSS class of Bootstrap, used to set the style of the main body of the modal window.
class="modal-footer"	modal-footer is a CSS class of Bootstrap, used to set the style of the footer of the modal window.
class="btn btn-success"	CSS classes btn and btn-success are used to create a large button at the footer of the modal window. You can use any other Bootstrap button instead.
class="btn"	The button class btn of Bootstrap CSS is used to create a small button at the footer of the modal window.
data-dismiss="modal"	The custom HTML5 data attribute data-dismiss is used to close the modal window.
data-toggle="modal"	The custom HTML5 data attribute data-toggle is used to open the modal window.
class="btn btn-primary btn-large"	Set button style, click this button to create a modal window.
<script src="https://ajax.googleapis.com/ajax/libs /jquery/1.7.1/jquery.min.js"></script>	Reference Jquery file.
<script src="../bootstrap/twitter-bootstrap-v2> /js/bootstrap-modal.js"></script>	Reference JS file of bootstrap modal (modal box).

You can use JavaScript to implement Bootstrap modal window. Just call modal() in your JavaScript. Your code looks like this, you can reference it before the end tag of body (ie </body>).

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

Where identifier is a Jquery selector used to identify the relevant container element. Next, let's look at what options there are.

The following are some options that may be used when customizing the appearance and feel of modal windows through modal().

backdrop

The backdrop option is used to include a modal-backdrop element.

If you replace line 2 of the code in the "Using JavaScript" example with the following code, that is, assign the value of backdrop option to false, there is no modal-backdrop at this time.

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

keyboard

If the keyboard option is used, the modal window will be closed when escape is clicked. Its type is boolean, the default value is true. If the value of the keyboard option is set to false, the modal window will not be closed even if escape is clicked.

If you replace line 2 of the code in the "Using JavaScript" example with the following code, that is, assign the value of keyboard option to false, escape will not close the modal window at this time.

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

show

If the show option is used, the modal window will be displayed when initialized. Its type is boolean, the default value is true. If the value of the show option is set to false, the modal window will not be displayed during initialization.

If you replace line 2 of the code in the "Using JavaScript" example with the following code, that is, assign the value of show option to false, the modal window will not be displayed during initialization.

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

The following are some methods used by modal().

.modal(options)

This method activates the content as a modal (modal box). 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 is no modal (modal box) backdrop element at this time.

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

.modal('toggle')

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

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

.modal(show)

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

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

.modal(hide)

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

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

The following are events related to Modals (modal box). These events are used to intercept and execute their own code.

show

After the show instance method is called, this event is triggered immediately.

shown

After the modal box is displayed (and the CSS transition effect has also been executed), this event is triggered.

hide

After the hide instance method is called, this event is called immediately.

hidden

After the modal box is hidden from the user (and the CSS transition effect has also been executed), this event is triggered.

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