Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。

一. 使用模态框必须要引入以下三个插件：

<link rel="stylesheet" href="bootstrap.min.css"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script>

二. 通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。
要显示的模态框代码：

<!-- 模态声明--><div class="modal fade" id="mymodal" tabindex="-1">    <!-- 窗口声明 -->    <div class="modal-dialog">        <!-- 内容声明 -->        <div class="modal-content">            <!-- 头部 -->            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>                <h3 class="modal-title" id="title">header-title</h3>            </div>            <!-- 主体 -->            <div class="modal-body">                <p>body</p>                <form>                <div class="form-group">                <label for="input">message:</label>                <input  class="form-control" id="input" type="text">                </div>                </form>            </div>            <!-- 注脚 -->            <div class="modal-footer">                <button type="button" class="btn btn-primary" data-dismiss="modal">close</button>                <button type="button" class="btn btn-default">save</button>            </div>        </div><!-- .modal-content -->    </div><!-- .modal-dialog --></div>

效果如下：

关键代码解释：

1. .modal类，用来把 <div>的内容识别为模态框，内容。
2. .fade类,当模态框被切换时，它会引起内容淡入淡出,不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。
3. tabindex=”-1”，没有的话设置keyboard就不会起效果，键盘上的 esc 键被按下时就不会正常关闭模态框。
4. .modal-dialog类，用来窗口声明，不添加 .modal-dialog类模态框宽度会占全屏，有两个可选尺寸，在.modal-dialog类后添加modal-lg或者modal-sm，会分别显示大模态框和小模态框。
5. .modal-content类，用来内容声明，其中包括.modal-header，.modal-body，.modal-footer。不添加.modal-content类，显示的模态框会是透明的。
6. class=”close”，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。

7. data-dismiss=”modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

   1. 通过data属性调用模态框：

<button class="btn btn-default" type="button" data-toggle="modal" data-target="#mymodal">点击按钮触发模态框</button>

关键代码解释：

1. data-target=”#mymodal” 是您想要在页面上加载的模态框的目标。
2. data-toggle=”modal”，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

除了 data-toggle 和 data-target 两个声明属性外，还有一些可以用选项，可以通过在 HTML 元素上设置 data-*的属性声明来控制效果：

特别说明：
data-show=”false”//初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。

2. 通过JavaScript调用模态框：

$('#mymodal').modal({ show : true, backdrop : false, keyboard : false, remote : 'index.html'//服务器上的文件}); 

---

三. 方法

$('#btn').on('click', function() { $('#myModal').modal('show');}); 

四. 事件

基于上面模态框的例子：将按钮中data-*内容传递到

<button class="btn btn-default" type="button" data-toggle="modal" data-target="#mymodal" data-whatever="添加的内容">点击按钮触发模态框</button><script>$('#mymodal').on('show.bs.modal', function (event) {  var button = $(event.relatedTarget) // Button that triggered the modal  var content = button.data('whatever') // Extract info from data-* attributes  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.  var modal = $(this)  modal.find('#title').text('Content received' + content)  modal.find('#input').val(content)})</script>

效果图：