Bootstrap 模态对话框

模态对话框

JavaScript内置了 3 种对话框：alert()、prompt()、confirm()。alert() 只是一个简单的提示对话框，prompt() 可以接受用户输入的信息，confirm() 允许用户执行选择性操作。

当弹出一个对话框时，浏览器会停止解析页面，并中断脚本执行，直到用户关闭对话框。因此，这些对话框被称作模态对话框。

JavaScript提供的对话框外观丑陋，功能过于简单，而且不支持定制。鉴于此，Bootstrap重新打造了一个模态对话框插件，它简洁、灵活，具有精简的功能和友好的默认行为。

模态对话框插件需要 bootstrap-modal.js 文件支持，在使用该插件之前，应该导入 jQuery 和 bootstrap-modal.js 文件。

使用方法

Bootstrap中，使用 .modal 的容器创建模态对话框。一个模态对话框包括头部、正文、尾部 3 个部分：头部由 .modal-header 定义，主要放置标题和关闭按钮，关闭按钮是通过自定义属性 data-dismiss 来触发关闭行为，取值 "modal" 表示关闭模态对话框；正文由 .modal-body 定义；尾部由 .modal-footer 定义，主要放置操作按钮。代码如下：

<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

效果如图 5‑1所示：

图5-1 Bootstrap模态框Modal插件

事实上，Bootstrap中的模态对话框就是一个页面元素，它可以很简单，也可以很复杂。你可以根据需要，在模态对话框的正文部分放置任何内容。如果内容很多，Bootstrap会自动为对话框的正文部分添加滚动条。

默认情况下，打开页面时，模态对话框会直接显示在页面上。只需为 . modal 容器追加 .hide 类，就可以让模态对话框默认隐藏。同时，还可以为 . modal 容器追加 .fade 类，让模态对话框在打开和关闭时具有淡入淡出效果。如：

<div class="modal hide fade">
...
</div>

对于默认隐藏的模态对话框，你可以在页面上添加一个按钮，当页面加载时，页面上只显示按钮，当用户点击按钮时，再打开隐藏的模态对话框。如：


<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, eget lacinia odio sem.</p>
...
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>

运行效果如图 5‑2所示：

图5-2 Bootstrap模态框Modal插件触发按钮

点击上述按钮，就会打开隐藏的模态对话框。效果如图 5‑3所示：

图5-3 Bootstrap打开隐藏的模态框