Bootstrap：模態彈出框

在 Bootstrap 框架中把模態彈出框統一稱爲 Modal。這種彈出框效果在大多數 Web 網站的交互中均可見。好比點擊一個按鈕彈出一個框，彈出的框多是一段文件描述，也可能帶有按鈕操做，也有可能彈出的是一張圖片。本文將詳細介紹Bootstrap模態彈出框

結構分析

Bootstrap框架中的模態彈出框，分別運用了「modal」、「modal-dialog」和「modal-content」樣式，而彈出窗真正的內容都放置在「modal-content」中，其主要又包括三個部分：

　　☑ 彈出框頭部，通常使用「modal-header」表示，主要包括標題和關閉按鈕

　　☑ 彈出框主體，通常使用「modal-body」表示，彈出框的主要內容

　　☑ 彈出框腳部，通常使用「modal-footer」表示，主要放置操做按鈕

<div class="modal show">

    <div class="modal-dialog">
    
        <div class="modal-content">
        
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模態彈出窗標題</h4>
            </div>
            
            <div class="modal-body">
                <p>模態彈出窗主體內容</p>
            </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 -->

對於彈窗而言，modal-content是樣式的關鍵。主要設置了彈窗的邊框、邊距、背景色和陰影等樣式

觸發方式

衆所周知，模態彈出窗在頁面加載完成時，是被隱藏在頁面中的，只有經過必定的動做（事件）才能觸發模態彈出窗的顯示。在Bootstrap框架中實現方法有2種

在介紹觸發方式以前，首先要說明.show和.fade這兩個方法。只有模態彈出窗默認是隱藏的，才能觸發其顯示

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.show {
    display: block!important;
}

【方法一】

模態彈出窗聲明，只須要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法通常依賴於這些自定義的data-xxx 屬性。好比data-toggle="" 或者 data-dismiss=""）

data-toggle必須設置爲modal(toggle中文翻譯過來就是觸發器)；

data-target能夠設置爲CSS的選擇符，也能夠設置爲模態彈出窗的ID值，通常狀況設置爲模態彈出窗的ID值，由於ID值是惟一的值

<!-- 觸發模態彈出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊</button>
<!-- 模態彈出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模態彈出窗標題</h4>
            </div>
            <div class="modal-body">
                <p>模態彈出窗主體內容</p>
            </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 -->

【方法二】

觸發模態彈出窗也能夠是一個連接<a>元素，那麼能夠使用連接元素自帶的href屬性替代data-target屬性

不過建議仍是使用統一使用data-target的方式來觸發

<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊</a>

尺寸

Bootstrap框架爲模態彈出窗提供了不一樣尺寸，一個是大尺寸樣式「modal-lg」，另外一個是小尺寸樣式「modal-sm」。其結構上稍作調整

[注意].bs-example-modal-lg和.bs-example-modal-sm是自定義的名稱，而非必須

<div class="modal fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <p>小火柴的藍色理想</p>
            </div>
        </div>
    </div>
</div>

參數說明

除了經過data-toggle和data-target來控制模態彈出窗以外，Bootstrap框架針對模態彈出框還提供了其餘自定義data-屬性，來控制模態彈出窗。有關Modal彈出窗自定義屬性相關說明以下所示

該參數設置在按鈕上，或者彈窗上均可以。出於方便，通常地，在按鈕上設置

[注意]屬性值必定要加引號，如data-backdrop="false"

若是想要支持esc鍵關閉彈窗，須要在彈窗上設置tabindex="-1"

<button type="button" data-toggle="modal" data-target="#mymodal1" class="btn btn-primary">默認樣式</button>
<button type="button" data-toggle="modal" data-target="#mymodal2" data-backdrop="false" class="btn btn-primary">無蒙版</button>
<button type="button" data-toggle="modal" data-target="#mymodal3" data-keyboard="false" class="btn btn-primary">ESC失效</button>
<button type="button" data-toggle="modal" data-target="#mymodal4" data-show="false" class="btn btn-primary">彈窗默認不顯示</button>

JS觸發

除了使用自定義屬性data-觸發模態彈出框以外，還能夠經過JavaScript方法來觸發模態彈出窗。好比說給按鈕設置一個單擊事件，而後觸發模態彈出窗

只需一行 JavaScript 代碼，便可經過元素的 id myModal 調用模態框

$('#myModal').modal()

使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置

【屬性設置】

模態彈出窗默認支持的自定義屬性主要有

不想讓用戶按ESC鍵關閉模態彈出窗，能夠這樣作

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

【參數設置】

在Bootstrap框架中還爲模態彈出窗提供了三種參數設置，具體說明以下