bootstrap JavaScript 插件 之 模態框

JavaScript 插件可以單個引入（使用 Bootstrap 提供的單個 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或壓縮版的 bootstrap.min.js）。

建議使用壓縮版的 JavaScript 文件

bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用時，只需選擇一個引入頁面就可以了。

組件的 data 屬性

不要在同一個元素上同時使用多個插件的 data 屬性。

模態框 modal.js

模態框經過了優化，更加靈活，以彈出對話框的形式出現，具有最小和最實用的功能集。

不支持模態框重疊

千萬不要在一個模態框上重疊另一個模態框。要想同時支持多個模態框，需要自己寫額外的代碼來實現。

模態框的 HTML 代碼放置的位置

務必將模態框的 HTML 代碼放在文檔的最高層級內（也就是說，儘量作爲 body 標籤的直接子元素），以避免其他組件影響模態框的展現和/或功能。

<div>
    <a href="" class="btn btn-block btn-primary" data-target="#modals" data-toggle="modal">詳細條款</a>
    <div class="modal" id="modals">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button">&times;</button>
                    <p>詳細條款</p>
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                    <p>4</p>
                    <p>5</p>
                    <p>6</p>
                    <p>7</p>
                    <p>8</p>
                </div >
                <div class="modal-footer">
                    <p>
                        <button class="btn btn-primary" id="ok">同意</button>
                        <button class="btn btn-warning" id="no">不同意</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('#modals').modal({
            show:true,
            keyboard:true,
            remote:false,
            backdrop:false
        })
    })
</script>

增強模態框的可訪問性

務必爲 .modal 添加 role="dialog" 屬性，aria-labelledby="myModalLabel" 屬性用於只想模態框的標題欄，aria-hidden="true" 用於通知輔助性工具略過模態框的 DOM元素。

另外，你還應該通過 aria-describedby 屬性爲模態框 .modal 添加描述性信息。

參數

可以將選項通過 data 屬性或 JavaScript 代碼傳遞。對於 data 屬性，需要將參數名稱放到 data- 之後，例如data-backdrop=""。

名稱	類型	默認值	描述
backdrop	boolean 或 字符串 'static'	true	Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	鍵盤上的 esc 鍵被按下時關閉模態框。
show	boolean	true	模態框初始化之後就立即顯示出來。
remote	path	false	This option is deprecated since v3.2.1 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or callingjQuery.load yourself. 如果提供的是 URL，將利用 jQuery 的 load 方法從此 URL 地址加載要展示的內容（只加載一次）並插入.modal-content 內。如果使用的是 data 屬性 API，還可以利用 href 屬性指定內容來源地址。下面是一個實例： Copy <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>