Bootstrap中怎么使用模态框？Modal组件用法浅析-猿码集

介绍

Bootstrap是一种流行的响应式框架，它提供了许多用于创建Web应用程序的组件。Bootstrap模态框是其中的一种组件，它允许您在当前页面上添加浮动框，供用户输入和显示信息。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 Title</h4>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

当用户单击链接、按钮或菜单项时，模态框会弹出。您可以使用模态框来显示单张图片、表单、警告框等等。

模态框组件的属性

Bootstrap的模态框组件提供了多个属性，让开发者可以自定义设计：

1. toggle属性

toggle属性在使用JavaScript切换模态框时使用，如果启用toggle="modal"，则单击触发器元素时会切换模态框。例如：


  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

2. backdrop属性

当用户单击模态框外部时，backdrop属性定义了一个选项，决定是否关闭模态框：

- static：关闭模态框时不执行任何操作。

- true：关闭模态框，并执行数据处理操作。

- false：关闭模态框时不执行任何操作。

例如：


  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    ...
  </div>

3. keyboard属性

keyboard属性定义了一个选项，决定是否启用键盘控制模态框：

- true：允许使用键盘。

- false：不允许使用键盘。

例如：


  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false">
    ...
  </div>

4. remote属性

如果您要使用远程URL加载模态框内容，则可以指定remote属性：


  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="remote.html">
    ...
  </div>

Modal组件尺寸的大小

模态框大小可以通过添加预定义的类来更改：

1. modal-lg类

该类将模态框大小调整为较大（大于普通模态框，默认大小）：


  <div class="modal fade modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    ...
  </div>

2. modal-sm类

该类将模态框大小调整为较小（小于普通模态框，默认大小）：


  <div class="modal fade modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    ...
  </div>

模态框事件处理方法

模态框提供了多个事件处理方法，可以在JavaScript中使用：

show事件

该事件在模态框被显示时触发。您可以在这里执行需要的任务，例如：


  $('#myModal').on('show.bs.modal', function () {
    // do something…
  })

shown事件

该事件在模态框显示完成后触发。您可以在这里执行需要的任务，例如：


  $('#myModal').on('shown.bs.modal', function () {
    // do something…
  })

hide事件

该事件在模态框隐藏时触发。您可以在这里执行需要的任务，例如：


  $('#myModal').on('hide.bs.modal', function () {
    // do something…
  })

hidden事件

该事件在模态框隐藏完成后触发。您可以在这里执行需要的任务，例如：


  $('#myModal').on('hidden.bs.modal', function () {
    // do something…
  })

总结

使用Bootstrap的模态框，可以快速轻松地创建一个好看、用户友好的弹出窗口，以便在页面上显示信息，供用户输入和显示数据。Modal 组件提供了多个选项和事件，能够根据需求自定义模态框的属性，并且允许您在JavaScript中处理事件，获取更好的用户体验。

参考

- Bootstrap Modal

- Bootstrap Modal Examples

Bootstrap中怎么使用模态框？Modal组件用法浅析

介绍