Bootstrap Modals（模態框）
描述
Bootstrap Modals（模態框）是使用定制的 Jquery 插件創建的。它可以用來創建模態窗口豐富用戶體驗，或者為用戶添加實用功能。您可以在 Modals（模態框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。
在本教學中，將通過一些實例和解釋來討論如何使用 Bootstrap 創建模態窗口。同時，我們也會討論用於定制的各種可用選項。
什麼是必需的
您需要 Jquery、Bootstrap CSS 和 JavaScript 檔 bootstrap-modal.js。這個 js 檔位於您下載的 Bootstrap 主文件夾中的 js 檔夾內。
Jquery 位於您的 Bootstrap 主文件夾中的 docs > assets > js 下，名為 jquery.js。或者您可以直接訪問 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下載 Jquery。
Bootstrap Modals（模態框）長什麼樣
下麵的實例演示了 Bootstrap Modals（模態框）長什麼樣。
在您的網站中使用 Bootstrap Modals（模態框）
下麵的實例演示了如何在網頁中使用 Bootstrap Modals（模態框）。請注意，您不需要編寫任何的 JavaScript 代碼。實例後面附有相關的解釋。
實例
<h2>使用Bootstrap創建模態框</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>這是一個模態框標題</h3>
</div>
<div class="modal-body">
<h4>模態框中的文本</h4>
<p>你可以在這添加一些文本。</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">喚醒活動</a>
<a href="#" class="btn" data-dismiss="modal">關閉</a>
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">發動演示模態框</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
線上查看 Bootstrap Modals（模態框）實例
解釋
下麵的表格解釋了上面的代碼。它將幫助您理解如何使用 Bootstrap Modals（模態框）。
| 代碼 | 解釋 |
|---|---|
| div id="example" | 分配給相關 div 的 id，id 的值指向後邊要實現 modal（模態框）的 JavaScript。 |
| class="modal hide fade in" | Bootstrap CSS 的四個 class - modal、hide、fade 和 in，用於設置 modal（模態框）的佈局。 |
| style="display: none; | 用於保持模態窗口可見，直到觸發器觸發（比如點擊相關按鈕）。 |
| <div class="modal-header"> | modal-header 適用於定義模態窗口標題樣式的 class。 |
| a class="close" | CSS class close 用於設置模態窗口關閉按鈕的樣式。 |
| data-dismiss="modal" | data-dismiss 是一個定制的 HTML5 data 屬性。用於關閉模態窗口。 |
| class="modal-body" | modal-body 是 Bootstrap 的一個 CSS class，用於設置模態窗口主體的樣式。 |
| class="modal-footer" | modal-footer 是 Bootstrap 的一個 CSS class，用於設置模態窗口尾部的樣式。 |
| class="btn btn-success" | CSS class btn 和 btn-success 用於在模態窗口的尾部創建一個大號的按鈕。您可以使用任何其他 Bootstrap 按鈕代替。 |
| class="btn" | Bootstrap CSS 的 按鈕 class btn，用於在模態窗口的尾部創建一個小號的按鈕。 |
| data-dismiss="modal" | HTML5 定制的 data 屬性 data-dismiss，用於關閉模態窗口。 |
| data-toggle="modal" | HTML5 定制的 data 屬性 data-toggle，用於打開模態窗口。 |
| class="btn btn-primary btn-large" | 設置按鈕樣式，點擊該按鈕則創建模態窗口。 |
| <script src="https://ajax.googleapis.com/ajax/libs /jquery/1.7.1/jquery.min.js"></script> |
引用 Jquery 檔。 |
| <script src="../bootstrap/twitter-bootstrap-v2> /js/bootstrap-modal.js"></script> |
引用 bootstrap modal（模態框）的 JS 檔。 |
使用 JavaScript
您可以使用 JavaScript 來實現 Bootstrap 模態窗口。只需要在您的 JavaScript 中調用 modal() 即可。您的代碼如下所示，您可以在 body 結束標籤（即 </body>）前引用它。
$(function ()
{ $("#identifier").modal();
});
其中 identifier 是一個 Jquery 選擇器，用於標識相關的容器元素。接下來，我們來看看 options 都有哪些。
選項
下麵是一些通過 modal() 定制模態窗口外觀和感觀時可能使用到的選項。
backdrop
backdrop 選項用於包含一個 modal-backdrop 元素。
如果您把"使用 JavaScript"實例中行號 2 的代碼替換為下麵的代碼，即給 backdrop 選項賦值為 false，此時就不存在任何的 modal-backdrop。
{ $("#example").modal({backdrop:false});
keyboard
如果使用 keyboard 選項，當點擊 escape 時則關閉模態窗口。它的類型是 boolean，默認值是 true。如果把 keyboard 選項的值設置為 false，此時即使點擊 escape 也不會關閉模態窗口。
如果您把"使用 JavaScript"實例中行號 2 的代碼替換為下麵的代碼，即給 keyboard 選項賦值為 false，此時點擊 escape 則不會關閉模態窗口。
{ $("#example").modal({keyboard:false});
show
如果使用 show 選項，當初始化的時候則會顯示模態窗口。它的類型是 boolean，默認值是 true。如果把 show 選項的值設置為 false，在初始化時不會顯示模態窗口。
如果您把"使用 JavaScript"實例中行號 2 的代碼替換為下麵的代碼，即給 show 選項賦值為 false，在初始化時不會顯示模態窗口。
{ $("#example").modal({show:false});
方法
下麵是一些通過 modal() 使用到的方法。
.modal(options)
該方法把內容啟動為一個 modal（模態框）。您可以引用一個可選的 object 類型的 options 參數。如果您在本教學的第一個實例中的 </body> 標籤前添加下麵的代碼，此時就不存在任何的 modal（模態框） backdrop 元素。
$('#example').modal({
backdrop: false
})
.modal('toggle')
該方法手動切換一個 modal（模態框）。如果您在本教學的第一個實例中的 </body> 標籤前添加下麵的代碼，即可手動切換 modal（模態框）。
$('#example').modal('toggle')
.modal(show)
該方法可用於手動打開一個 modal（模態框）。如果您在本教學的第一個實例中的 </body> 標籤前添加下麵的代碼，即可手動打開 modal（模態框）。
$('#example').modal('show')
.modal(hide)
該方法可用於手動隱藏一個 modal（模態框）。如果您在本教學的第一個實例中的 </body> 標籤前添加下麵的代碼，即可手動隱藏 modal（模態框）。
$('#example').modal('hide')
事件
下麵是 Modals（模態框）相關的事件。這些事件用於截獲並執行自己的代碼。
show
當 show 實例方法被調用之後，此事件被立即觸發。
shown
當模態框顯示出來之後（同時 CSS 過渡效果也已執行完畢），此事件被觸發。
hide
當 hide 實例方法被調用之後，此事件被立即觸發。Immediately after the hide instance method has been called, this event is called.
hidden
當模態框向用戶隱藏之後（同時 CSS 過渡效果也已執行完畢），此事件被觸發。