组件 - 弹出模态框(Modal) - 《Bootstrap v4.0 中文文档手册》

弹出模态框 (Modal)
居中显示
- Modal title
Tooltips工具提示和弹出提示框
使用栅格
- Grids in modals
同框不同文-基于触发按钮的多样化模态框
移除动画效果
动态高度
无障碍易用性处理
嵌入 YouTube 视频
尺寸大小选项
- Large modal
- Small modal
用法

使用Bootstrap的JavaScript模态框插件可以为您的网站添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互（如考试问答场景-译者注）

运行原理

在开始使用Bootstrap模态框组件前，请务必阅读以下内容，因为我们的菜单选项最近有新的更改迭代。

弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从<body>中删除滚动事件，以便模态框自身的内容能得到滚动。
点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。
Bootstrap一次只支持一个模态窗口，不支持嵌套模式，因为我们相信那样叠加会造成用户体验不佳。
模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，你可能会遇到问题。
同样是受position: fixed属性影响，在在移动设备上使用模态框，有一些注意事项。有关详细信息，请参阅浏览器支持文档。
根据HTML5的语义定义， autofocus HTML 属性对 Bootstrap 模态框没有影响，要达到同样的效果，需要使用一些JavaScript:

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

此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的辅助功能文档的简化动作部分。.

继续查看范例和文档：

示例

静态例子-动态窗口组件

下面是一个静态模式的例子(其 position 和 display 已经被重写 )，包括模态标题、模态体 (需要 padding)、模态页脚（可选)，我们要求你尽可能地在模态标题区加上移除关闭按钮，或提供另一个明确的关闭动作。

<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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

完整示例

点击下面按钮，能呼出动态窗口，即切换到模态框的动态模式，它将从页面顶部向下浮动并淡入展现：

Woohoo, you're reading this text in a 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 视口（弹出内容区）或设备的模态变得较长时，它们会自动滚动页面，点击下面的演示可以看到：

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.