BootStrap學習筆記JS插件（一）--模態彈出框

 

一、彈出框基礎

<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 -->

 

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

  ☑ 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕

  ☑ 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容

  ☑ 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕

TIPS:.show{ display:block}

 

 二、彈出框大小

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">  //.modal-lg或.model-sm
        <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>
    </div>
</div>

.modal-lg 為大彈出框；.model-sm為小彈出框

 

三、觸發模態彈出框的兩種方式

3.1 用data-target觸發

<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>
    </div>
</div>

注意以下事項：

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

  2、data-target可以設置為CSS的選擇符，也可以設置為模態彈出窗的ID值，一般情況設置為模態彈出窗的ID值，因為ID值是唯一的值。

3.2 用<a>觸發

<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a>
<!-- 模態彈出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>

使用<a>自帶的href屬性替代data-target屬性

 

四、彈出框增加動畫效果

可通過給“.modal”增加類名“fade”為模態彈出框增加一個過渡動畫效果。

 

五、data參數的使用

　　試驗在觸發按鈕或彈出modal上設置，發現都可以使用。

 

六、javascript觸發模態彈出框

<!-- 觸發模態彈出窗元素 -->
<button class="btn btn-primary" type="button">點擊我</button>
<!-- 模態彈出窗內容 -->
<div class="modal" 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 -->

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

6.1 參數設置一：

比如你不想讓用戶按ESC鍵關閉模態彈出窗，你就可以這樣做：

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

6.2 參數設置二：

6.3 事件設置

模態彈出窗還支持四種類型的事件，分別是模態彈出窗的彈出前、彈出后，關閉前、關閉后，具體描述如下：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 處理代碼...
})