Bootstrap模态框

data-toggle="modal" 打开模态框,激活
data-target="" 绑定需要打开的模态框选择器，可以将一个模态框绑定在多个按钮上，与href=“”大多时候都是可以通用的
.modal 设置模态框
.fade 设置模态框动画的效果
.modal-dialog 模态框内容居中了，模态框定义了三个样式，在其后添加 .modal-sm 小 .modal-lg 大 .modal-md中（默认中）
.modal-content 给定了内容宽度
.modal-header 头部样式
.data-dismiss="modal" 关闭模态框
.modal-body 内容区
.container-fluid  在内容区划分列时，写在.container-fluid 里会好点
.modal-footer 底部区
tabindex="-1" 让快捷键Tab只能在框中循环
data-backdrop="true" 为“false”时，周围可点击关闭区域消失，必须点击按钮才能关闭
data-keyboard="true" 为“false”时，Esc键不能关闭模态框，与tabindex="-1"一起使用才有效
data-show="true" 为“false”时，第一次打开需要点击两次

data-remote="false" <a data-toggle="modal" href="remote.html" data-target="#modal">

<button class="btn btn-info" data-toggle="modal" tabindex="-1" data-target="#qq">1</button>
<button class="btn btn-info" data-toggle="modal" tabindex="-1" data-target="#qq">2</button>
<button class="btn btn-info" data-toggle="modal" tabindex="-1" data-target="#qq">3</button>
<div class="modal fade" tabindex="-1" data-backdrop="false" data-keyboard="true" id="qq">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>模态框可以绑定在多个按钮上</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-default">按钮</button>
            </div>
        </div>
    </div>
</div>

 

可以添加一些触发事件

show.bs.modal        点击开启模态框按钮，在模态框出现之前执行

shown.bs.modal      点击开启模态框按钮，在模态框出现后马上执行

hide.bs.modal            点击关闭模态框按钮，在模态框关闭之前执行

hidden.bs.modal        点击关闭模态框按钮，在模态框关闭后马上执行 

 

 

$(function(){  

    $("#qq").on("show.bs.modal",function(){  

        alert("需要执行的代码")  

    })  

})