Question

模块框是一种流畅的、灵活的、对话框式的提示，有最小化的功能需求，以及智能默认值。

由于 HTML5 定义了它的语义， autofocus HTML 属性 在 Bootstrap 模态框中产生不了影响。为了实现同样的效果，使用一些自定义 JavaScript：

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

不支持打开多个模态框

确保不要在一个模态框还可见的时候打开另一个模态框。在同一时候显示超过一个模态框，需要自定义代码。

模态框标记位置

尽可能把一个模态框的 HTML 代码始终放置在 document 的顶层位置，以避免别的组件影响模态框的外观以及功能。

移动设备警告

这里有一些在移动设备上使用模态框的警告，欲知详情，请看 浏览器支持文档 。

静态例子

一个经渲染的模态框，带有头、主体，以及有一些操作功能的脚。

<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

现场演示

利用 JavaScript，通过点击下面的按钮，切换一个模态框。它将从网页顶上滑下来，并淡入。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

使模态框可访问

确保 .modal 添加了 role="dialog" 和 aria-labelledby="..." ，并引用了模态框的标题，而 .modal-dialog 上面则添加了 role="document"

另外，你可以在 .modal 上添加一个 aria-describedby 属性，是对模态框的描述。

嵌入 YouTube 视频

在模态框中嵌入 Youtube 视频，需要 Bootstrap 中没有的 JavaScript，用来实现自动中断和拖放等功能。欲知详情请看 Stack Overflow post 。

可选的尺寸

模态框有两种可选的尺寸，利用修饰类放在 .modal-dialog 上就可用了。

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

移除动画

如果模态框仅要求它出现，但是不要淡出淡入效果，只需从模态框标记上移除 .fade 类。

<div class="modal" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

使用网格系统

为了在模态框中使用 Bootstrap 的网格系统，只需要在 .modal-body 内部嵌套一个 container-fluid ，然后在该容器中使用普通的网格系统类。

<div class="modal fade" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </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>
<div class="bd-example bd-example-padded-bottom">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
  </button>
</div>

基于触发按钮的多样化模态框

有几个按钮触发同样的模态框，只是内容有一些不同？使用 event.relatedTarget 以及 HTML 的 data-* 属性 根据点击的是哪个按钮，多样化模态框的内容。参阅 relatedTarget 以增进对模态框事件的了解。

<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  <div class="modal fade" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">New message</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">Recipient:</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">Message:</label>
              <textarea class="form-control"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

高度不固定的模态框

如果一个模态框在打开时，高度发生变化，万一出现了滚动条，你必须调用 $('#myModal').data('bs.modal').handleUpdate() 以调整模态框的位置。

用途

模态框插件利用 data 属性或者 JavaScript，根据需要切换隐藏的内容。它还向 <body> 添加了 .modal-open 类以覆盖默认的滚动行为，并生成一个 .modal-backdrop 类以提供一个点击区域，当在模态框的外面点击就可以抹除显示的模态框。

利用 data 属性

不用写 JavaScript 也能激活一个模态框。在一个控件元素（比如说一个按钮）上设置 data-toggle="modal" ，同时在添加一个 data-target="#foo" 或者 href="#foo" 以指向某一个模态框，就可以切换了。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

利用 JavaScript

只需要一行 JavaScript 就可以对 id 为 myModal 的元素调用模态框。

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

选项

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- , as in data-backdrop="" .

名称	类型	默认值	描述
backdrop	布尔值或字符串 static	true	包括了一些 modal-backdrop 元素。作为替补，为一个 backdrop 指定值 static ，单击的时候就不会关闭模态框。
keyboard	布尔值	true	在按下 Esc 键的时候关闭模态框。
show	布尔值	true	在初始化的时候显示该模态框。

方法

.modal(options)

把某块内容作为模态框激活。接受一个可选的参数 object 。

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

.modal(‘toggle’)

人为切换一个模态框。在模态框真正显示或隐藏之前返回给调用者（即，在 shown.bs.modal 或者 hidden.bs.modal 事件发生之前）。

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

.modal(‘show’)

人为打开一个模态框。在模态框真正显示之前返回给调用者（即，在 shown.bs.modal 事件发生之前）。

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

.modal(‘hide’)

人为隐藏一个模态框。在模态框真正隐藏之前返回给调用者（即，在 hidden.bs.modal 事件发生之前）。

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

事件

Bootstrap 的模态框类为模态框相关的回调函数提供了事件接口。所有的模态框事件都能由模态框自身触发。

事件类型	描述
show.bs.modal	当调用 show 实例方法时，会立即触发该事件。如果是由点击引起的，被点击的元素是可用的，成为 Event 对象的 relatedTarget 属性。
shown.bs.modal	当模态框对用户来说可见时（需要等待 CSS 过渡完成），会触发该事件。如果是由点击引起的，被点击的元素是可用的，成为 Event 对象的 relatedTarget 属性。
hide.bs.modal	当调用 hide 实例方法时，会立即触发该事件。
hidden.bs.modal	当模态框对用户来说终于完成隐藏时（需要等待 CSS 过渡完成），会触发该事件。
loaded.bs.modal	当模态框使用 remote 选项完成内容载入时，会立即触发该事件。

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