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> 必须具有与用于触发模态框的 data-target 属性的值相同的 ID ("myModal")。
The .modal 类将 <div> 的内容标识为模态框，并将其置于焦点。
The .fade 类添加了一个过渡效果，使模态框淡入淡出。如果你不想要这种效果，请删除此类。
The role="dialog" 属性提高了使用屏幕阅读器的人员的可访问性。
The .modal-dialog 类设置了模态框的适当宽度和边距。
"模态框内容" 部分
具有 class="modal-content" 的 <div> 样式化模态框（边框、背景色等）。在此 <div> 中，添加模态框的标题、主体和页脚。
The .modal-header 类用于定义模态框标题的样式。标题内的 <button> 具有 data-dismiss="modal" 属性，如果你点击它，就会关闭模态框。The .close 类样式化关闭按钮，The .modal-title 类样式化标题，使其具有适当的行高。
The .modal-body 类用于定义模态框主体的样式。在此添加任何 HTML 标记；段落、图片、视频等。
The .modal-footer 类用于定义模态框页脚的样式。请注意，此区域默认情况下是右对齐的。
模态框大小
通过添加 .modal-sm 类（用于小型模态框）或 .modal-lg 类（用于大型模态框）来更改模态框的大小。
将大小类添加到具有类 .modal-dialog 的 <div> 元素中
默认情况下，模态框的大小为中等。
完整的 Bootstrap 模态框参考
有关所有模态框选项、方法和事件的完整参考，请访问我们的 Bootstrap JS 模态框参考。
