模态框(modal)

使用 Bootstrap JavaScript 的 modal 插件来增加一个对话视窗、用户提示或完整的自定义内容。

如何使用

在开始使用 Bootstrap modal之前,请务必阅读以下内容。

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

继续阅读演示和使用指南。

实例

下面是一个 static modal实例(意思是它的 positiondisplay 已被重写)。 包括modal标题、modal体(padding 必要)和modal页脚(可选)。尽可能地包含modal标题与移除按钮,或提供另一个明确的移除操作。

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</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>
  </div>
</div>

完整实例

通过点击下面的按钮切换 modal 呈现。它将从页面顶部向下滑动并淡入。

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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>

滚动长内容

当模态对于用户的 viewport 或设备变得太长时,它们会独立于页面本身滚动。 试试下面的演示来看看我们的意思。

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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-dialog-centered 加入到 .modal-dialog 来使互动视窗垂直居中

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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>

工具提示和弹出提示框

Tooltips 和 popovers 可以根据需要放置在 modal。 当 modal 关闭时,其中的任何工具提示和插件也将自动关闭。

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

使用网格

通过 .modal-body 中加入 .container-fluid modal 中使用 Bootstrap 网格系统。然后,像其他任何地方一样使用正常的网格系统 class。

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

不同的 modal 内容

有一对按钮来触发相同互动视窗,但导入不同内容? 使用 event.relatedTargetHTML data-* 属性 (或者 通过 jQuery) 依据点击按钮来更改modal的内容。

下面在 HTML 和 JavaScript 后有一个实例。 有关 relatedTarget 的详细资讯,请参阅 modal 的事件。

<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" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></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>
$('#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)
})

移除动画

对于只要出现而不需要淡入淡出的 modal,请从你的 modal 标记中删除 .fade

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

动态高度

如果一个 modal 的高度在打开时改变,你应该调用 $('#myModal').modal('handleUpdate') 来重新调整 modal 的位置,以防止卷轴出现。

无障碍访问

请务必在.modalrole="document" modal标题的 .modal-dialog 中添加 .modal-dialogaria-labelledby="..."。另外,你可以使用 .modal 上的 aria-descriptby 来描述你的modal。

嵌入 YouTube 影片

在 modal 上嵌入 YouTube 影片需要额外的 JavaScript 不在 Bootstrap 自动停止重播和更多。有关详细资讯,请参阅 Stack Overflow 的文章

大小选项

modal 有两个可选的大小,可以通过 Class 放在 .modal-dialog 上。 这些尺寸会在某些中断点调整,以避免在较窄的 viewport 上出现水平卷轴。

<!-- Large modal -->
<button type="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>

用法

modal 插件通过 data 属性或 JavaScript 切换你隐藏的内容。它将 .modal-open 加到 <body> 以覆盖默认的滚动行为,并生成一个 .modal-backdrop 来提供点击区域,以便在点击modal外面时移除显示的modal。

通过data属性

启动一个 modal 而无需编写 JavaScript。在控制元素上设置 data-toggle="modal" (如按钮),以及一个 data-target="#foo"href="#foo" 来指定特定的modal进行切换。

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

通过 JavaScript

使用单行 JavaScript 调用 id 为 myModal 的 modal。

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

选项

可以通过 data 属性或 JavaScript 传递选项。对于data属性,将选项名称附加到 `.data-,如 data-backdrop=”” 那样。

名称 类型 默认值 描述
backdrop boolean or the string 'static' true 包括modal背景元素。或者指定 static 在点击背景时不关闭modal。
keyboard boolean true 按下 ESC 时关闭modal
focus boolean true 初始化时 focus modal。
show boolean true 初始化时显示模态框。

方法

异步方法和转换

所有API方法都是 asynchronous 然后开始 transition。 。 一旦转换开始但在结束之前,它们将返回到调用者。 此外,将忽略对转换组件的方法调用。

有关更多信息,请参阅 入门->Javascript

.modal(options)

通过 modal 启用你的内容,将选项加入 object内。

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

.modal('toggle')

手动切换 modal。在 modal 实际显示或隐藏之前返回给调用者 (即在 shown.bs.modalhidden.bs.modal 之前)。

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

.modal('show')

手动打开 modal。 modal 实际显示之前返回给调用者 (即在 shown.bs.modal 事件发生之前)。

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

.modal('hide')

手动隐藏modal。 在 modal 实际隐藏之前返回给调用者 (即在 hidden.bs.modal 事件发生之前)。

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

.modal('handleUpdate')

如果模态的高度在打开时发生变化(即如果出现滚动条),则手动重新调整模态的位置。

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

.modal('dispose')

销毁一个元素的 Modal。

事件

Bootstrap modal提供了一下事件,所有相关事件都被触发在他本身的状态中(在 <div class="modal">)。

事件类型 描述
show.bs.modal 当调用 show 实例方法时,此事件会立即触发。如果是因点击,点击的元素作为事件的 relatedTarget 属性可用。
shown.bs.modal 当modal显示时会触发此事件(等待 CSS 转换完成)。如果是因点击导致,点击的元素作为事件的 relatedTarget 属性可用。
hide.bs.modal 当调用 hide 实例方法时,会立即触发此事件
hidden.bs.modal 当 modal 隐藏后会触发此事件(等 CSS 转换完成)。
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})