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