在实际开发中，会遇到很多弹出层效果，个人比较推荐Bootstrap的模态框modal.js，样式简洁大方，而且应用灵活。
1.静态实例
复制下面的代码段，即可显示一个静态的模态框，样式如下：
<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->2.动态实例
点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。 该动态方法利用data-target=”#”,data-toggle=”#”
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>3.利用Javascript调用模态框
只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：
$('#myModal').modal(options)参数（options）: keyboard : 键盘上的 esc 键被按下时关闭模态框。boolean类型，默认值为true; show : 模态框初始化之后就立即显示出来。boolean类型，默认值为true; backdrop : 点击模态框周围空白处关闭模态框。boolean 或 字符串 ‘static’，默认值为true; remote：如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例：
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>4.方法
将页面中的某块内容作为模态框激活。接受可选参数 object。
.modal(options)可通过某页面id值，触发模态框的显示或隐藏。
.modal('方法名')方法名： toggle: 手动打开或关闭模态框。 show: 手动打开模态框。 hide: 手动隐藏模态框。 handleUpdate: 为适应页面大小需求，调整模态框的位置。
5.事件 在实际开发应用中，我们不仅要打开/隐藏模态框，同时还要触发一些事件，比如提示，根据不同功能显示或隐藏不同组件等，Bootstrap为我们提供了强大的事件功能。 注：这是我呕心沥血花了2个小时，才醒悟的道理：为了支持模态框的事件功能，请在body底部，引入bootstrap-modal.js； 但是，我遇到了模态框闪退的问题，网上查询方法是引用过多Js,bootstrap.min.js 和modal.js不应该同时引用，请注意！！各位可以两种方法都试试！
