可選大小

通過對 modal-dialog樣式後面追加 .modal-lg 或者 .modal-sm 樣式來實現 模態框的大小調整

基本格式

<div class="modal" id="myDialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"
 
></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

data api 呼叫方式

<button data-toggle="modal" data-target="#myModal">彈框</button>

如果想要實現關閉按鈕

data-dismiss = “modal”

js 方式呼叫視窗

$(“#myModal”).modal(‘show’);

動畫效果

.fade

模態框內可以編輯柵格系統

row col-sm-*

配合show.bs.modal的event.relatedTarget 物件 可以繫結data-whatever屬性 ，然後傳入模態視窗中進行編輯

button上設定 data-* 屬性(*自定義)

modal的show.bs.modal 時間 通過event.relatedTarget獲取button ，然後通過jq的data(“*”)方法即可獲取屬性值。

監聽事件

show.bs.modal 點選了顯示按鈕 就能顯示

shown.bs.modal 視窗完全顯示後 就觸發

hide.bs.modal

hidden.bs.model

loaded.bs.modal 遠端資料來源載入完後

注意事項

1. 如果是預設定好的靜態內容，data-toggle的作用就是用來隱藏或者顯示，只做樣式的渲染。
2. 問題就在，如果內容通過href的remote方式進行了二次渲染，那麼在重新重新整理頁面之前，所有靜態的內容都被刷掉，不會重置，所有實際業務中應該考慮內容重新整理重置的方式，所以建議一直使用remote重新整理的方式。