Bootstrap modal box (Modal) widget

Modal Box (Modal) is overlaid on the parent form subform. Generally, the purpose is to show content from a single source, and can have some interaction without leaving the parent form. Subform can provide information, interaction and so on.

If you want to refer to the individual plug-in features, you need to referencemodal.js.Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.

usage

You can switch the modal box hidden content (Modal) plug-in:

• Through data attributes: set the properties of data-toggle = "modal"in the controller elements (such as buttons or links) on, and setdata-target = "# identifier"orhref = "# identifier"to assign a specific mode to be switched state box (with id = "identifier").
• By JavaScript: Using this technique, you can by a simple line of JavaScript to call the modal box with id = "identifier" of:

  $ ( '# Identifier'). Modal (options)
  

Examples

A static modal window instance, as shown in the following examples:

The results are as follows:

• Modal window, you need to have some kind of trigger. You can use the buttons or links. Here we are using a button.
• If you look closely at the above code, you will find in the <button>tag, data-target = "# myModal " is the goal that you want to load on a page modal box.You can create multiple modal box on the page, and then create different triggers for each of the modal box. Now, obviously, you can not load multiple modules at the same time, but you can create multiple loading at different times on the page.
• Modal box Two things to note:
  1. The first is.modal, for the <div> recognize content modal box.
  2. The second is.fade class.When the modal box is switched, it will cause the contents fade.
• aria-labelledby = "myModalLabel", the attribute references modal box title.
• Propertyaria-hidden = "true" for holding a modal window is not visible until the trigger is fired up (such as clicking on the relevant button).
• <Div class = "modal-header">, modal-header is defined head style modal window class.
• class = "close", close is a CSS class, modal window is used to set the style of the Close button.
• data-dismiss = "modal", HTML5 data attribute is a custom.Where it is used to close the modal window.
• class = "modal-body", is a CSS class Bootstrap CSS for the style set as the main modal window.
• class = "modal-footer", is a CSS class Bootstrap CSS for styling the bottom of the modal window.
• data-toggle = "modal", HTML5 custom data attribute data-toggle to open the modal window.

Options

There are some options that can be used to customize the modal window (Modal Window) look and feel, which are obtained by data attributes or JavaScript to pass. The following table lists these options:

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

method

Here are some useful methods and modal () used together.

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

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

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

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

Examples

The following example demonstrates the method:

The results are as follows:

Just click ESC key, modal window is quit.

event

The following table lists the event to use the modal box. These events can be used when the hook function.

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

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

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

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

Examples

The following example demonstrates the usage of the event:

The results are as follows:

As shown in the above example, if you click on theclosebutton,hideevent, a warning message is displayed.