Bootstrap3 动态模态对话框

动态模态对话框

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

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

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

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

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        <button class="close" data-dismiss="modal">×</button>        <h4 class="modal-title" id="myModalLabel">Modal title</h4>      </div>      <div class="modal-body">        ...      </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>  </div></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 上开源。