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">

1. <button class="btn btn-info" data-toggle="modal" tabindex="-1" data-target="#qq">1</button>  
2. <button class="btn btn-info" data-toggle="modal" tabindex="-1" data-target="#qq">2</button>  
3. <button class="btn btn-info" data-toggle="modal" tabindex="-1" data-target="#qq">3</button>  
4. <div class="modal fade" tabindex="-1" data-backdrop="false" data-keyboard="true" id="qq">  
5.     <div class="modal-dialog">  
6.         <div class="modal-content">  
7.             <div class="modal-header">  
8.                 <button type="button" class="close" data-dismiss="modal"><span>×</span></button>  
9.                 <h4 class="modal-title">模态框标题</h4>  
10.             </div>  
11.             <div class="modal-body">  
12.                 <p>模态框可以绑定在多个按钮上</p>  
13.             </div>  
14.             <div class="modal-footer">  
15.                 <button class="btn btn-default" data-dismiss="modal">关闭</button>  
16.                 <button class="btn btn-default">按钮</button>  
17.             </div>  
18.         </div>  
19.     </div>  
20. </div>  

 

可以添加一些触发事件

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

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

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

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

 

 

$(function(){  

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

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

    })  

})  

转载于:https://www.cnblogs.com/d-laowu/p/9131718.html