JavaScript内置了 3 种对话框：alert()、prompt()、confirm()。alert() 只是一个简单的提示对话框，prompt() 可以接受用户输入的信息，confirm() 允许用户执行选择性操作。当弹出一个对话框时，浏览器会停止解析页面，并中断脚本执行，直到用户关闭对话框。因此，它们被称作模态对话框。
由于JavaScript提供的对话框外观丑陋，功能过于简单，还不支持定制。因此，Bootstrap重新打造了一个模态对话框组件，它简洁、灵活，具有精简的功能和友好的默认行为。
模态对话框组件用于定义模态框的外观，模态对话框插件（modal.js）用来控制模态框组件的显示和隐藏。
Bootstrap的模态对话框由三层结构定义，由 .modal 创建最外层容器，由 .modal-dialog 创建对话框的文档结构，由 .modal-content 创建对话框的真正内容。
一个标准的模态对话框的内容包括头部、正文、尾部 3 个部分，头部由 .modal-header 定义，主要放置标题和关闭按钮，关闭按钮是通过自定义属性 data-dismiss 来触发关闭行为，取值 "modal" 表示关闭模态对话框；正文由 .modal-body 定义；尾部由 .modal-footer 定义，主要放置操作按钮，按钮可以使用 <a> 元素，也可以使用 <button> 元素。代码如下：
<div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal">Close</a> <a class="btn btn-primary">Save changes</a> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->打开页面时，上述模态对话框默认会直接显示在页面上。效果如图 4‑1所示：
图4-1 模态对话框
为了增强模态框的可访问性，务必为.modal添加role="dialog"和aria-labelledby="..."属性，并为.modal-dialog添加role="document"属性。你还应该通过aria-describedby属性为模态框.modal添加描述性信息。
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
