Bootstrap 模态框插件


模态框插件

模态框插件是一个对话框/弹出窗口,显示在当前页面的顶部:

提示: 插件可以单独包含 (使用 "modal.js" 文件),也可以一次包含所有插件 (使用 "bootstrap.js" 使用 "bootstrap.min.js")。


如何创建模态框

以下实例创建了一个简单的模态框效果:

实例

<!-- 使用按钮触发模态 -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- 模态 -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- 模态内容-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
亲自试一试 »

实例解析

"Trigger" 部分:

要触发模态窗口,需要使用按钮或链接。

然后包括两个 data-* 属性:

  • data-toggle="modal" 打开模式窗口
  • data-target="#myModal" 指向模态窗口的 id

"Modal" 部分:

模态的父级 <div> 的ID必须与用于触发模态的 data-target 属性 ("myModal") 的值相同。

.modal 类将 <div> 的内容识别为模态,并将重点放在它上。

.fade 类增加了一个过渡效果,使模态淡入淡出。如果不想产生这种效果,请删除此类。

属性 role="dialog" 提高了使用屏幕阅读器的人的可访问性。

.modal-dialog 类设置模态的适当宽度和边距。

"Modal content" 部分:

<div> 带有 class="modal-content 样式的模式(边框、背景色等)。 在这个 <div> 中,添加模态的页眉、正文和页脚。

.modal-header 类用于定义模态的标题样式。 标题中的 <button> 有一个 data-dismiss="modal" 属性,如果你点击它,它会关闭模态。 .close 类设置关闭按钮的样式, .modal-title 类将标题样式设置为适当的线条高度。

.modal-body 类用于定义模态主体的样式。在这里添加任何HTML标记;段落、图像、视频等。

.modal-footer 类用于定义模态页脚的样式。请注意,默认情况下,此区域是右对齐的。



模态框尺寸

我们可以通过添加 .modal-sm 类来创建一个小模态框, 添加 .modal-lg 类可以创建一个大模态框

尺寸类放在 <div> 元素的 .modal-dialog 类后:

小模态框

<div class="modal-dialog modal-sm">
亲自试一试 »

大模态框

<div class="modal-dialog modal-lg">
亲自试一试 »

默认情况下,模态框是中等大小的。


完整 Bootstrap 模态框参考

有关所有模态框的选项、方法和事件的完整参考,请访问 Bootstrap JS 模态框参考