Bootstrap 模態(tài)框
Bootstrap Modals（模態(tài)框）
描述
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來創(chuàng)建模態(tài)窗口豐富用戶體驗，或者為用戶添加實用功能。您可以在 Modals（模態(tài)框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。
在本教程中，將通過一些實例和解釋來討論如何使用 Bootstrap 創(chuàng)建模態(tài)窗口。同時，我們也會討論用于定制的各種可用選項。
什么是必需的
您需要 Jquery、Bootstrap CSS 和 JavaScript 文件 bootstrap-modal.js。這個 js 文件位于您下載的 Bootstrap 主文件夾中的 js 文件夾內(nèi)。
Jquery 位于您的 Bootstrap 主文件夾中的 docs > assets > js 下，名為 jquery.js。或者您可以直接訪問 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下載 Jquery。
Bootstrap Modals（模態(tài)框）長什么樣
下面的實例演示了 Bootstrap Modals（模態(tài)框）長什么樣。
在您的網(wǎng)站中使用 Bootstrap Modals（模態(tài)框）
下面的實例演示了如何在網(wǎng)頁中使用 Bootstrap Modals（模態(tài)框）。請注意，您不需要編寫任何的 JavaScript 代碼。實例后面附有相關(guān)的解釋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Modals Example</title>
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Example of creating Modals with Twitter 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>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</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>
</body>
</html>
在線查看 Bootstrap Modals（模態(tài)框）實例。
解釋
下面的表格解釋了上面的代碼。它將幫助您理解如何使用 Bootstrap Modals（模態(tài)框）。
| 代碼 | 解釋 |
|---|---|
| div id="example" | 分配給相關(guān) div 的 id，id 的值指向后邊要實現(xiàn) modal（模態(tài)框）的 JavaScript。 |
| class="modal hide fade in" | Bootstrap CSS 的四個 class - modal、hide、fade 和 in，用于設(shè)置 modal（模態(tài)框）的布局。 |
| style="display: none; | 用于保持模態(tài)窗口可見，直到觸發(fā)器觸發(fā)（比如點擊相關(guān)按鈕）。 |
| <div class="modal-header"> | modal-header 適用于定義模態(tài)窗口標題樣式的 class。 |
| a class="close" | CSS class close 用于設(shè)置模態(tài)窗口關(guān)閉按鈕的樣式。 |
| data-dismiss="modal" | data-dismiss 是一個定制的 HTML5 data 屬性。用于關(guān)閉模態(tài)窗口。 |
| class="modal-body" | modal-body 是 Bootstrap 的一個 CSS class，用于設(shè)置模態(tài)窗口主體的樣式。 |
| class="modal-footer" | modal-footer 是 Bootstrap 的一個 CSS class，用于設(shè)置模態(tài)窗口尾部的樣式。 |
| class="btn btn-success" | CSS class btn 和 btn-success 用于在模態(tài)窗口的尾部創(chuàng)建一個大號的按鈕。您可以使用任何其他 Bootstrap 按鈕代替。 |
| class="btn" | Bootstrap CSS 的 按鈕 class btn，用于在模態(tài)窗口的尾部創(chuàng)建一個小號的按鈕。 |
| data-dismiss="modal" | HTML5 定制的 data 屬性 data-dismiss，用于關(guān)閉模態(tài)窗口。 |
| data-toggle="modal" | HTML5 定制的 data 屬性 data-toggle，用于打開模態(tài)窗口。 |
| class="btn btn-primary btn-large" | 設(shè)置按鈕樣式，點擊該按鈕則創(chuàng)建模態(tài)窗口。 |
| <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（模態(tài)框）的 JS 文件。 |
使用 JavaScript
您可以使用 JavaScript 來實現(xiàn) Bootstrap 模態(tài)窗口。只需要在您的 JavaScript 中調(diào)用 modal() 即可。您的代碼如下所示，您可以在 body 結(jié)束標簽（即 </body>）前引用它。
$(function ()
{ $("#identifier").modal();
}); 其中 identifier 是一個 Jquery 選擇器，用于標識相關(guān)的容器元素。接下來，我們來看看 options 都有哪些。
選項
下面是一些通過 modal() 定制模態(tài)窗口外觀和感觀時可能使用到的選項。
backdrop
backdrop 選項用于包含一個 modal-backdrop 元素。
如果您把"使用 JavaScript"實例中行號 2 的代碼替換為下面的代碼，即給 backdrop 選項賦值為 false，此時就不存在任何的 modal-backdrop。
{ $("#example").modal({backdrop:false});
keyboard
如果使用 keyboard 選項，當點擊 escape 時則關(guān)閉模態(tài)窗口。它的類型是 boolean，默認值是 true。如果把 keyboard 選項的值設(shè)置為 false，此時即使點擊 escape 也不會關(guān)閉模態(tài)窗口。
如果您把"使用 JavaScript"實例中行號 2 的代碼替換為下面的代碼，即給 keyboard 選項賦值為 false，此時點擊 escape 則不會關(guān)閉模態(tài)窗口。
{ $("#example").modal({keyboard:false});
show
如果使用 show 選項，當初始化的時候則會顯示模態(tài)窗口。它的類型是 boolean，默認值是 true。如果把 show 選項的值設(shè)置為 false，在初始化時不會顯示模態(tài)窗口。
如果您把"使用 JavaScript"實例中行號 2 的代碼替換為下面的代碼，即給 show 選項賦值為 false，在初始化時不會顯示模態(tài)窗口。
{ $("#example").modal({show:false});
方法
下面是一些通過 modal() 使用到的方法。
.modal(options)
該方法把內(nèi)容激活為一個 modal（模態(tài)框）。您可以引用一個可選的 object 類型的 options 參數(shù)。如果您在本教程的第一個實例中的 </body> 標簽前添加下面的代碼，此時就不存在任何的 modal（模態(tài)框） backdrop 元素。
$('#example').modal({
backdrop: false
})
.modal('toggle')
該方法手動切換一個 modal（模態(tài)框）。如果您在本教程的第一個實例中的 </body> 標簽前添加下面的代碼，即可手動切換 modal（模態(tài)框）。
$('#example').modal('toggle')
.modal(show)
該方法可用于手動打開一個 modal（模態(tài)框）。如果您在本教程的第一個實例中的 </body> 標簽前添加下面的代碼，即可手動打開 modal（模態(tài)框）。
$('#example').modal('show') .modal(hide)
該方法可用于手動隱藏一個 modal（模態(tài)框）。如果您在本教程的第一個實例中的 </body> 標簽前添加下面的代碼，即可手動隱藏 modal（模態(tài)框）。
$('#example').modal('hide') 事件
下面是 Modals（模態(tài)框）相關(guān)的事件。這些事件用于截獲并執(zhí)行自己的代碼。
show
當 show 實例方法被調(diào)用之后，此事件被立即觸發(fā)。
shown
當模態(tài)框顯示出來之后（同時 CSS 過渡效果也已執(zhí)行完畢），此事件被觸發(fā)。
hide
當 hide 實例方法被調(diào)用之后，此事件被立即觸發(fā)。Immediately after the hide instance method has been called, this event is called.
hidden
當模態(tài)框向用戶隱藏之后（同時 CSS 過渡效果也已執(zhí)行完畢），此事件被觸發(fā)。
更多建議：