Bootstrap Modal Plugin

A modal is a child window that overlays the parent window. Typically, the purpose is to display content from a separate source, allowing some interaction without leaving the parent window. Child windows can provide information, interaction, etc.

If you want to reference this plugin's functionality separately, then you need to referencemodal.js. Or, asBootstrap Plugins Overviewmentioned in the chapter, you can referencebootstrap.jsor the compressed version ofbootstrap.min.js。

Usage

You can toggle the hidden content of the Modal plugin:

• Via data attributes: Set attributes on a controller element (such as a button or link)data-toggle="modal", and setdata-target="#identifier"orhref="../index.html"to specify the particular modal to toggle (with id="identifier").
• Via JavaScript: Using this technique, you can invoke a modal with id="identifier" with a simple one line of JavaScript:

  $('#identifier').modal(options)
  

Example

A static modal window example, as shown in the example below:

The result is as follows:

Code explanation:

• To use a modal window, you need some kind of trigger. You can use a button or a link. Here we use a button.
• If you look carefully at the code above, you will find in the <button> tag,data-target="#myModal"is the target of the modal you want to load on the page. You can create multiple modals on the page, and then create different triggers for each modal. Now, obviously, you cannot load multiple modals at the same time, but you can create multiple on the page to load at different times.
• There are two things to note in the modal:
  1. First is.modal, used to identify the content of the <div> as a modal.
  2. Second is.fadeclass. When the modal is toggled, it causes the content to fade in and out.
• aria-labelledby="myModalLabel", this attribute references the title of the modal.
• Attributearia-hidden="true"is used to keep the modal window invisible until the trigger is activated (for example, clicking on the relevant button).
• <div class="modal-header">, modal-header is a class that defines styles for the header of the modal window.
• class="close", close is a CSS class used to style the close button of the modal window.
• data-dismiss="modal", is a custom HTML5 data attribute. Here it is used to close the modal window.
• class="modal-body", is a CSS class in Bootstrap CSS, used to style the body of the modal window.
• class="modal-footer", is a CSS class in Bootstrap CSS, used to style the footer of the modal window.
• data-toggle="modal", HTML5 custom data attribute data-toggle is used to open the modal window.

Options

There are some options that can be used to customize the look and feel of the modal window. They are passed via data attributes or JavaScript. The following table lists these options:

<a data-toggle="modal" href="remote.html" data-target="#modal" rel="noopener noreferrer">请点击我</a>

Methods

Below are some useful methods that can be used with modal().

$('#identifier').modal({
keyboard: false
})

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

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

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

Example

The following example demonstrates the usage of the methods:

The result is as follows:

Just press the ESC key, and the modal window will exit.

Events

The following table lists the events used in the modal. These events can be used as hooks in functions.

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

Example

The following example demonstrates the usage of the events:

The result is as follows:

As shown in the example above, if you click theClosebutton, that is, thehideevent, an alert message will be displayed.