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("需要執行的代碼")

})

})

Bootstrap模態框