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>