Bootstrap框架（3）

一 模態框（Modal）插件

模態框（Modal）是覆蓋在父窗體上的子窗體。一般，目的是顯示來自一個單獨的源的內容，能夠在不離開父窗體的狀況下有一些互動。子窗體可提供信息、交互等。

1.1 用法

您能夠切換模態框（Modal）插件的隱藏內容：

• 經過 data 屬性：在控制器元素（好比按鈕或者連接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）。
• 經過 JavaScript：使用這種技術，您能夠經過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框：

1	$( '#identifier' ).modal(options)

一個靜態的模態窗口實例：

<h2>建立模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
            </div>
            <div class="modal-body">在這裏添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

代碼講解：

//注意：使用模態窗口，您須要有某種觸發器。能夠使用按鈕或連接。這裏使用的是按鈕。<button> 標籤中的
//data-target="#myModal" 是想要在頁面上加載的模態框的目標。能夠在頁面上建立多個模態框，而後爲每
//個模態框建立不一樣的觸發器。

//在模態框中關鍵字解釋：

.modal     －－－－－用來把 <div> 的內容識別爲模態框。

.fade class－－－－－當模態框被切換時，它會引發內容淡入淡出。

data-toggle="modal"－－－－－－HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。

aria-hidden="true"－－－－－用於保持模態窗口不可見，直到觸發器被觸發爲止（好比點擊在相關的按鈕上）。

aria-labelledby="myModalLabel"－－－－－－該屬性引用模態框的標題。

<div class="modal-header">－－－－－是爲模態窗口的頭部定義樣式的類。

class="close"－－－－－是一個 CSS class，用於爲模態窗口的關閉按鈕設置樣式。

data-dismiss="modal"－－－－－－是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。

class="modal-body"－－－－－－是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的主體設置樣式。

class="modal-footer"－－－－－－是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的底部設置樣式。

1.2 選項

有一些選項能夠用來定製模態窗口（Modal Window）的外觀和感觀，它們是經過 data 屬性或 JavaScript 來傳遞的。

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

1.3 方法：

 實例

<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
            </div>
            <div class="modal-body">按下 ESC 按鈕退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
    $('#myModal').modal({
        keyboard: true
    })
});
</script>