Bootstrap 模态框插件
模态框插件
模态框插件是一个对话框/弹出窗口，显示在当前页面的顶部。
提示: 插件可以单独包含（使用 Bootstrap 的单个“modal.js”文件），或者全部一起包含（使用“bootstrap.js”或“bootstrap.min.js”）。
如何创建模态框
以下示例展示了如何创建一个基本的模态框
示例
<!-- 使用按钮触发模态框 -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">打开模态框</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">模态框标题</h4>
</div>
<div class="modal-body">
<p>模态框中的一些文本。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
自己动手试一试 »
示例解释
“触发器”部分
要触发模态框窗口，您需要使用按钮或链接。
然后包含这两个 data-* 属性
data-toggle="modal"打开模态框窗口data-target="#myModal"指向模态框的 id
“模态框”部分
模态框的父级 <div> 必须有一个 ID，该 ID 与用于触发模态框的 data-target 属性值（“myModal”）相同。
类 .modal 标识 <div> 的内容为一个模态框，并将其置于焦点。
类 .fade 添加了淡入淡出模态框的过渡效果。如果您不想要此效果，请删除此类。
属性 role="dialog" 提高了使用屏幕阅读器的人的可访问性。
类 .modal-dialog 设置了模态框的正确宽度和边距。
“模态框内容”部分
具有 class="modal-content" 的 <div> 用于样式化模态框（边框、背景颜色等）。在此 <div> 内部，添加模态框的标题、正文和页脚。
类 .modal-header 用于定义模态框标题的样式。标题内的 <button> 具有 data-dismiss="modal" 属性，点击它可以关闭模态框。类 .close 用于样式化关闭按钮，而类 .modal-title 则用于样式化标题，具有正确的行高。
类 .modal-body 用于定义模态框正文的样式。可以在此处添加任何 HTML 标记；段落、图像、视频等。
类 .modal-footer 用于定义模态框页脚的样式。请注意，此区域默认右对齐。
模态框大小
通过添加 .modal-sm 类来创建小模态框，或添加 .modal-lg 类来创建大模态框，以更改模态框的大小。
将大小类添加到具有 .modal-dialog 类的 <div> 元素上
默认情况下，模态框大小为中等。
完整的 Bootstrap 模态框参考
有关所有模态框选项、方法和事件的完整参考，请访问我们的 Bootstrap JS 模态框参考。
