BootStrap--modal

模態彈窗

　　觸發元素基本結構：

<button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button>

　　內容元素基本結構：

  <div class="modal fade" id="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times</button>
                title
            </div>
            <div class="modal-body">
                this is main content
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">cancel</button>
                <button class="btn btn-success">ok</button>
            </div>
        </div>
    </div>
  </div>

　　觸發元素的關鍵屬性爲data-target和data-toggle,data-target和具體的彈窗互相對應，data-toggle="modal"提供了HTML觸發條件

　　彈窗內容要正確嵌套，彈窗的出現和隱藏的動畫要設置在最外層

　　能夠經過modal-sm和modal-lg改變彈窗的大小，這兩個class要設置在modal-dialog那一層

　　modal-header中的關閉按鈕的關鍵屬性爲class="close"該class實現了樣式的改變，data-dismiss="modal"提供了HTML關閉的觸發條件

　　模態彈窗提供了四個屬性，這四個屬性一般設置在模態彈窗上class="modal"那一層(內容DOM的最外層)，四個屬性分別爲：

　　1.data-backdrop:是否包含一個背景，默認值爲true同時單擊背景能夠關閉模態窗，設置爲data-backdrop="static"則單擊背景時不關閉，設置爲backdrop="false"則不存在背景

　　2.data-keyboard:按下ESC時是否關閉模態窗默認值爲true即按下時關閉模態窗，設置爲data-keyboard="false"則在點擊ESC時再也不關閉模態窗(該屬性要想生效要在最外層設置屬性tabindex)

　　3.data-show:初始化時是否顯示默認值爲true即初始時顯示，data-show="false"則初始化時不顯示第一次點擊觸發元素準備模態窗，在點擊一次開始顯示模態窗

　　4.href:加載其餘內容

JS使用方法

　　模態窗提供了四個事件：

　　1.show.bs.modal在顯示以前觸發

　　2.shown.bs.modal在顯示以後觸發

　　3.hide.bs.modal在隱藏以前觸發

　　4.hidden.bs.modal在隱藏以後觸發

　　使用方式爲：

$("#modal").on("shown.bs.modal",function(){
  alert("already show")
})

　　若是咱們在模態窗中使用了input表單元素，若是須要在每次顯示模態窗是input能夠獲取焦點，就須要使用shown.bs.modal了

　　模態彈窗也提供勒三個參數：

　　1.toggle切換模態窗的顯示隱藏

　　2.show顯示模態窗

　　3.hide隱藏模態窗

　　使用方式爲：

$("#modal").modal("show")

　　模態窗提供的四個屬性一樣能夠經過JS方式來使用，用JS使用時四個屬性分別爲：backdrop、keyboard、show、remote

　　使用方式爲：

$("#modal").modal({
    backdrop:"static",
    keyboard:false,
    show:false
})