Bootstrap 模态插件

模态插件

Modal 插件是一个显示在当前页面顶部的对话框/弹出窗口：

提示：插件可以单独包含（使用 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">×</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 必须与用于触发模态的数据目标属性的值相同 ("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:

小莫代尔

亲自试一试 »

大莫代尔

亲自试一试 »

默认情况下，模态框的尺寸为中等。

完整的 Bootstrap 模态参考

有关所有模式选项、方法和事件的完整参考，请访问我们的Bootstrap JS 模态参考。