Bootstrap 模态框（Modal）插件

模态框（Modal）是覆寫在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的内容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊、互動等。

Bootstrap 模态框（Modal）插件
如果您想要單獨引用該插件的功能，那麼您需要引用 <b>modal.js</b>。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

您可以切換模态框（Modal）插件的隐藏内容：

<b>通過 data 屬性</b>：在控制器元素（比如按鈕或者連結）上設定屬性 <b>data-toggle="modal"</b>，同時設定 <b>data-target="#identifier"</b> 或 <b>href="#identifier"</b> 來指定要切換的特定的模态框（帶有 id="identifier"）。

<b>通過 JavaScript</b>：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模态框：

一個靜态的模态視窗執行個體，如下面的執行個體所示：

<h2>建立模态框（Modal）</h2>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始示範模态框</button>

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="myModalLabel">模态框（Modal）标題</h4>

</div>

<div class="modal-body">在這裡添加一些文本</div>

</div>

</div>

結果如下所示：

使用模态視窗，您需要有某種觸發器。您可以使用按鈕或連結。這裡我們使用的是按鈕。

如果您仔細檢視上面的代碼，您會發現在 <button> 标簽中，<b>data-target="#myModal"</b> 是您想要在頁面上加載的模态框的目标。您可以在頁面上建立多個模态框，然後為每個模态框建立不同的觸發器。現在，很明顯，您不能在同一時間加載多個子產品，但您可以在頁面上建立多個在不同時間進行加載。

在模态框中需要注意兩點：

第一是 <b>.modal</b>，用來把 <div> 的内容識别為模态框。

第二是 <b>.fade</b> class。當模态框被切換時，它會引起内容淡入淡出。

<b>aria-labelledby="myModalLabel"</b>，該屬性引用模态框的标題。

屬性 <b>aria-hidden="true"</b> 用于保持模态視窗不可見，直到觸發器被觸發為止（比如點選在相關的按鈕上）。

<div class="modal-header">，modal-header 是為模态視窗的頭部定義樣式的類。

<b>class="close"</b>，close 是一個 CSS class，用于為模态視窗的關閉按鈕設定樣式。

<b>data-dismiss="modal"</b>，是一個自定義的 HTML5 data 屬性。在這裡它被用于關閉模态視窗。

<b>class="modal-body"</b>，是 Bootstrap CSS 的一個 CSS class，用于為模态視窗的主體設定樣式。

<b>class="modal-footer"</b>，是 Bootstrap CSS 的一個 CSS class，用于為模态視窗的底部設定樣式。

<b>data-toggle="modal"</b>，HTML5 自定義的 data 屬性 data-toggle 用于打開模态視窗。

有一些選項可以用來定制模态視窗（Modal Window）的外觀和感觀，它們是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

選項名稱

類型/預設值

Data 屬性名稱

描述

backdrop

boolean 或 string 'static'

預設值：true

data-backdrop

指定一個靜态的背景，當使用者點選模态框外部時不會關閉模态框。

keyboard

boolean

data-keyboard

當按下 escape 鍵時關閉模态框，設定為 false 時則按鍵無效。

show

data-show

當初始化時顯示模态框。

remote

path

預設值：false

data-remote

使用 jQuery .load 方法，為模态框的主體注入内容。如果添加了一個帶有有效 URL 的 href，則會加載其中的内容。如下面的執行個體所示：

下面是一些可與 modal() 一起使用的有用的方法。

方法

執行個體

<b>Options:</b> .modal(options)

把内容作為模态框激活。接受一個可選的選項對象。

<b>Toggle:</b> .modal('toggle')

手動切換模态框。

<b>Show:</b> .modal('show')

手動打開模态框。

<b>Hide:</b> .modal('hide')

手動隐藏模态框。

下面的執行個體示範了方法的用法：

</div>

隻需要點選 ESC 鍵，模态視窗即會退出。

下表列出了模态框中要用到事件。這些事件可在函數中當鈎子使用。

事件

show.bs.modal

在調用 show 方法後觸發。

shown.bs.modal

當模态框對使用者可見時觸發（将等待 CSS 過渡效果完成）。

hide.bs.modal

當調用 hide 執行個體方法時觸發。

hidden.bs.modal

當模态框完全對使用者隐藏時觸發。

下面的執行個體示範了事件的用法：

<h2>模态框（Modal）插件事件</h2>

<div class="modal-body">點選關閉按鈕檢查事件功能。</div>

$(function() {

$('#myModal').modal('hide')

});

</script>

$('#myModal').on('hide.bs.modal',

function() {

alert('嘿，我聽說您喜歡模态框...');

})

正如上面執行個體所示，如果您點選了關閉按鈕，即 hide 事件，則會顯示一個警告消息。