Bootstrap 的 Modal

1、簡介

Modal 就是彈出框，這裏 有一個例子。

Modal 的完整代碼以下：

<div class="modal fade" tabindex="-1" role="dialog" id="modalOfTriggerViaMarkupAPI" aria-labelledby="modalTitleOfTriggerViaMarkupAPI">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="modalTitleOfTriggerViaMarkupAPI">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

默認的 Modal 是隱藏的，讓它出現有兩種方式：

1. 標籤 API
2. JavaScript 代碼

2、經過標籤 API

Modal 的代碼已經有了，接下來咱們要爲 Modal 設置 id 而且添加一個按鈕，像下面這樣：

<button class="btn btn-info" data-toggle="modal" data-target="#modalOfTriggerViaMarkupAPI">Launch Modal Via Markup API</button>
<div class="modal fade" id="modalOfTriggerViaMarkupAPI" tabindex="-1" role="dialog" aria-labelledby="modalTitleOfTriggerViaMarkupAPI">
    <!-- some code -->
</div>

當咱們點擊按鈕的時候，Modal 就出現了。起做用的代碼是 data-toggle="modal" 和 data-target="#modalOfTriggerViaMarkupAPI"，二者缺一不可，它們的意思合起來就是——標籤 id 是 modalOfTriggerViaMarkupAPI 的 Modal，我要你顯示/隱藏（toggle）。

3、經過 JavaScript 代碼

一樣要藉助 Modal id 和一個按鈕：

<button id="btnOfTriggerModalViaJavaScript" class="btn btn-info">Launch Modal Via JavaScript</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalOfTriggerViaJavaScript">
    <!-- some code -->
</div>

讓它起做用的 JavaScript 代碼以下：

$('#btnOfTriggerModalViaJavaScript').on('click', function triggerModalViaJavaScript () {
    $('#modalOfTriggerViaJavaScript').modal('toggle');
})

4、Modal 的事件回調

Modal 可能發生的狀態包括顯示和隱藏。Bootstrap 針對這兩個狀態提供了相應的事件回調，代碼相似：

$('#modalOfTriggerViaMarkupAPI').on('show.bs.modal', function (e) {
    // do something...
})

事件是在 Modal（<div class="modal">） 上觸發的，主要有四個：

1. show.bs.modal ：在 Modal 顯示時觸發。
2. shown.bs.modal ：在 Modal 顯示以後觸發。
3. hide.bs.modal ：在 Modal 隱藏時觸發。
4. hidden.bs.modal ：在 Modal 隱藏以後觸發。

5、設備可訪問性

爲了提升代碼的設備可訪問性——盲人藉助閱讀設備一樣能夠很好地閱讀網頁內容，咱們會給 Modal 添加一些額外代碼。

1. 在 .modal 上：添加 role="dialog" 和 aria-labelledby="..."（值爲 .modal-title 的 id）。
2. 在 .modal-dialog 上：添加 role="document"。

另外，還能夠給 .modal 添加 aria-describedby 內容是彈出框的描述。

6、參考連接

http://getbootstrap.com/javascript/#modals

（完）