Bootstrap-Modal模態框插件

Bootstrap-Modal模態框插件

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

基本代碼清單

<!-- 模態框示例 -->
<button id="mybuttonid" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#identifier">
    開始演示模態框
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="identifier" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"></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>
<!-- 模態框示例 -->

相關class屬性：

• .modal：用來把 <div> 的內容識別爲模態框。 .fade：當模態框被切換時，它會引起內容淡入淡出。如果不需要模態框彈出時的動畫效果（淡入淡出效果），刪掉 .fade 類即可。

• aria-labelledby="myModalLabel"：引用模態框的標題。

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

• class="modal-dialog modal-lg"：大尺寸模態框；可選小尺寸：modal-dialog modal-sm。

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

• Bootstrap CSS 的一個 CSS class：

  modal-content：模態窗的全局定義。

  modal-header：模態窗的頭部定義。

  modal-body：模態窗口的主體設置樣式。

  modal-footer：模態窗口的底部設置樣式。

其他選項

data-backdrop="static"

取值：boolean或字符串 'static'。默認值：true。

作用：指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。

---

data-keyboard="true"

取值：boolean。默認值：true。

作用：鍵盤上的 esc 鍵被按下時關閉模態框。

---

data-show=“true”

取值：boolean。默認值：true。

作用：模態框初始化之後就立即顯示出來。

---

相關方法：

.modal(options)

將頁面中的某塊內容作爲模態框激活。接受可選參數 object。

$('#identifier').modal({
  keyboard: false,
  backdrop:'static'
})

.modal('toggle')

切換模態框。在模態框顯示或隱藏之前返回到主調函數中（也就是，在觸發 shown.bs.modal 或 hidden.bs.modal 事件之前）。

$('#identifier').modal('toggle');

.modal('show')

手動打開模態框。在模態框顯示之前返回到主調函數中（也就是，在觸發 shown.bs.modal 事件之前）。

$('#identifier').modal('show');

.modal('hide')

手動隱藏模態框。在模態框隱藏之前返回到主調函數中（也就是，在觸發 hidden.bs.modal 事件之前）。

$('#identifier').modal('hide');

.modal('handleUpdate')

重新調整模式的位置以與滾動條相對，以防出現滾動條，這會使模態窗跳轉到左側。僅當模態的高度在打開時發生變化時才需要。

$('#identifier').modal('handleUpdate');

相關事件：

show.bs.modal

show 方法調用之後立即觸發該事件。如果是通過點擊某個作爲觸發器的元素，則此元素可以通過事件的 relatedTarget 屬性進行訪問。

shown.bs.modal

此事件在模態框已經顯示出來（並且同時在 CSS 過渡效果完成）之後被觸發。如果是通過點擊某個作爲觸發器的元素，則此元素可以通過事件的 relatedTarget 屬性進行訪問。

hide.bs.modal

hide 方法調用之後立即觸發該事件。

hidden.bs.modal

此事件在模態框被隱藏（並且同時在 CSS 過渡效果完成）之後被觸發。

loaded.bs.modal

從遠端的數據源加載完數據之後觸發該事件。

調用事件示例：

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

根據按鈕改變模態框內容

有一堆按鈕都觸發相同的模式，只是內容略有不同？使用event.relatedTarget和[HTML data-*屬性]根據所單擊的按鈕來更改模式的內容。有關以下內容的詳細信息relatedTarget。

例如發送郵件：

給予id爲mybuttonid的按鈕設置自定義屬性data-user的值爲@ZhangSan，

$('#mybuttonid').data('user','@ZhangSan');
$('#identifier').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var recipient = button.data('user');// Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this);
    modal.find('.modal-title').text('New message to ' + recipient);
    //賦值給輸入框（根據需要替換爲自己的操作）
    modal.find('.modal-body input').val(recipient);
})