模态框

优质

小牛编辑

143浏览

2023-12-01

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

由于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" tabindex="-1" 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" tabindex="-1" 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" tabindex="-1" 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" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

使用网格系统

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

<div class="modal fade" tabindex="-1" 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" tabindex="-1" 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...
})