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必须与用于触发模态的 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 类后:
默认情况下，模态框是中等大小的。
完整 Bootstrap 模态框参考
有关所有模态框的选项、方法和事件的完整参考，请访问 Bootstrap JS 模态框参考。
