Bootstrap3 动态模态对话框

动态模态对话框

如果你希望在页面初始状态时不显示模态框，只有在用户点击某个按钮时，再打开隐藏的模态对话框，这也很简单。

首先，在页面上添加一个触发按钮。如：

1. <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
2.   Launch demo modal
3. </button>

然后，为 .modal 容器追加 .fade类，它会让对话框默认隐藏，并且在打开和关闭时具有淡入淡出效果。如：

1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
2.   <div class="modal-dialog" role="document">
3.     <div class="modal-content">
4.       <div class="modal-header">
5.         <button class="close" data-dismiss="modal">&times;</button>
6.         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
7.       </div>
8.       <div class="modal-body">
9.         ...
10.       </div>
11.       <div class="modal-footer">
12.         <a class="btn btn-default" data-dismiss="modal">Close</a>
13.         <a class="btn btn-primary">Save changes</a>
14.       </div>
15.     </div>
16.   </div>
17. </div>

此时，点击“Launch demo modal”按钮，就可以打开隐藏的模态对话框。效果如图 4‑2所示：

图4-2 打开隐藏的模态对话框

你有很多方法可以关闭模态框，最简单的方法就是在模态框之外的任何区域点击鼠标。除此之外，你还可以按Esc键，或点击模态框标题栏的小×，或页脚的close按钮。

注意：如果希望能够通过Esc键来关闭模态框，就必须为.modal容器添加 tabindex="-1" 属性。否则，你将无法通过Esc键来关闭模态框。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。