Bootstrap 模态框（Modal）插件

Modal 插件

模态框（Modal）插件是一个对话框/弹出窗口，显示在当前页面的最上层:

如何创建一个模态框

下面的实例演示如何创建一个基本模态:

实例

<!-- Modal 的触发按钮 -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
  <!-- Modal 内容-->
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&amp;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>

实例解释

"触发" 部分:

要触发模态框，需要使用按钮或链接。

需要包含两个 data-* 属性:

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

"Modal" 部分:

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

The .modal class identifies the content of <div> as a modal and brings focus to it.

这个 .modal 类将 <div> 的内容标识为模态框。

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

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

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

"Modal 内容" 部分:

<div> 使用 class="modal-content" 设置模块的样式 (border, background-color, 等等)。在 <div> 中, 添加模态框的页眉、正文和页脚。

.modal-header 类用于定义模态框的标题样式。标题中的 <button> 有一个 data-dismiss="modal" 属性，如果单击该属性，将关闭模态。这个 .close 类设置关闭按钮和 .modal-title 类使用适当的 line-height 行高设置标题样式。

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

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

模态框的大小

通过添加 .modal-sm 类用于小模态框或 .modal-lg 类用于大模态框。

对带有 .modal-dialog 类的 <div> 元素添加 大小样式:

小模态框

 <div class="modal-dialog modal-sm">

大模态框

 <div class="modal-dialog modal-lg">

完整的 Bootstrap 模态框参考

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