5.3 Bootstrap modal box (Modal) plug-in

---

Bootstrap modal box (Modal) plugin

A modal box (Modal) is a child form overlaid on a parent form. Usually, the intent is to display content from a separate source that can have some interaction without leaving the parent form. Subforms can provide information, interaction, and more.

Note: If you want to refer to the function of this plugin separately, then you need to refer to modal.js. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can reference bootstrap.js or the minified version of bootstrap.min.js.

usage

You can toggle the hidden content of the Modal plugin:

• Through the data attribute: set the attribute data-toggle="modal" on the controller element (such as a button or link), and set data-target="#identifier" or href="#identifier" to specify the specific modal box (with id="identifier") to toggle.
• Via JavaScript: Using this technique, you can invoke a modal box with id="identifier" with a simple line of JavaScript:

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

example

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

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

The result looks like this:

Code explanation:

• With modal windows, you need to have some kind of trigger. You can use buttons or links. Here we are using buttons.
• If you look closely at the code above, you'll see that 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 can't load multiple modules at the same time, but you can create multiple modules on the page to load at different times.
• There are two points to note in the modal box:
  1. The first is .modal, which is used to identify the content of the <div> as a modal box.
  2. The second is the .fade class. When the modal is toggled, it causes the content to fade in and out.
• aria-labelledby="myModalLabel", this attribute refers to the title of the modal box.
• The attribute aria-hidden="true" is used to keep the modal window invisible until a trigger is fired (such as clicking on the associated button).
• <div class="modal-header">, modal-header is a class that defines the style for the head 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 of Bootstrap CSS, which is used to set the style for the body of the modal window.
• class="modal-footer", is a CSS class of Bootstrap CSS, which is used to style the bottom 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 (Modal Window), which are passed through data attributes or JavaScript. The following table lists these options:

option name	type/default	Data attribute name	describe
backdrop	boolean or string 'static' Default: true	data-backdrop	Specify a static background that won't close the modal when the user clicks outside the modal.
keyboard	boolean default: true	data-keyboard	When the escape key is pressed, the modal box is closed, and when it is set to false, the key is invalid.
show	boolean default: true	data-show	Show the modal when initialized.
remote	path default: false	data-remote	Use the jQuery .load method to inject content into the body of the modal. If an href is added with a valid URL, the content will be loaded. As shown in the following example: <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

method

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

method	describe	example
Options:.modal(options)	Activate the content as a modal box. Accepts an optional options object.	$('#identifier').modal({ keyboard: false })
Toggle: .modal(‘toggle’)	Manually toggle the modal.	$('#identifier').modal('toggle')
Show: .modal(‘show’)	Open the modal manually.	$('#identifier').modal('show')
Hide: .modal(‘hide’)	Manually hide the modal.	$('#identifier').modal('hide')

example

The following example demonstrates the usage of the method:

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">按下 ESC 按钮退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
      
      
    $('#myModal').modal({
      
      
        keyboard: true
    })
});
</script>

The result looks like this:

Just hit the ESC key and the modal window will exit.

event

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

event	describe	example
show.bs.modal	Fired after the show method is called.	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal	Fired when the modal becomes visible to the user (will wait for CSS transitions to complete).	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal	Fired when the hide instance method is called.	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal	Fired when the modal is completely hidden from the user.	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

example

The following example demonstrates the usage of events:

<!-- 模态框（Modal） -->
<h2>模态框（Modal）插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">点击关闭按钮检查事件功能。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
      
      
    $('#myModal').modal('hide')
})});
</script>
<script>
$(function() {
      
      
    $('#myModal').on('hide.bs.modal',
    function() {
      
      
        alert('嘿，我听说您喜欢模态框...');
    })
});
</script>

The result looks like this:

As the example above shows, if you click the close button, the hide event, a warning message is displayed.