5.2.2　声明式用法

5.2.2　声明式用法

在了解了弹窗的基本HTML代码和样式原理之后，我们开始学习弹窗的声明式用法。在2.4节里讲到，所有的JavaScript组件都提供了声明式的语法，要想触发某一插件就需要对特定元素设置触发属性，一般都是自定义的，比如data-toggle=或者data-dismiss=。弹窗所用的触发属性是第一种。

一个基本的弹窗声明，只需要两个必需的自定义属性：data-toggle=和data-target=。示例如下：

<!-- 触发元素 -->
<button data-toggle="modal" data-target="popupCSS" class="btn btn-primary">
    单击弹出</button>
<!-- 弹窗内容 -->
<div class="modal fade popupCSS">
    <!-- 嵌套div和具体内容 -->
</div>

对于data-toggle，必须将其值设置为modal；data-target的值则可以设置为CSS选择符，可以是要弹出弹窗（modal）的id值，也可以是唯一的CSS样式。

如果触发元素为a元素，则也可以使用href的值作为data-target，这都是对modal弹窗进行定位用的，但一般建议都使用data-target，以便统一。

<!-- 触发元素 -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch 
    demo modal</a>
<!-- 弹窗内容 -->
<div class="modal fade" id="myModal">
    <!-- 嵌套div和具体内容 -->
</div>

另外，在进行声明式定义的时候，该组件还支持默认的参数选项，比如是否有灰色背景遮罩、按Esc键时是否关闭弹窗等。表5-1所示是可以用的属性和属性解释。

5.2.2　声明式用法 - 图1

上述属性，除了href外，其他3个data-开头的属性，一般情况下可以设置在触发元素（带有[data-toggle="modal"]属性的元素）上，也可以设置在弹窗最外层的div元素（带有modal，并且是由data-target指定的div元素）上。但特殊情况除外，就是在设置了href为url远程获取内容时，如果该弹窗实例已经运行过一次，则不会加载远程url的内容（依然保持modal-body内容不变），而且在触发元素上设置的可选参数也无效，但弹窗div元素容器上设置的参数依然有效。所以为了防止出现类型问题，开发的时候可以统一在触发元素容器上设置表5-1中3个以data-开头的参数。示例代码如下：

<!-- 触发元素 -->
<a data-toggle="modal" data-target="#myModal" href="remote.html" class="btn 
    btn-primary">触发元素</a>
<!-- 弹窗内容 -->
<div class="modal fade" id="myModal" data-modal=" ">
    <!-- 嵌套div和具体内容 -->
</div>

注意

为了能够支持辅助性工具，可以为.modal添加role="dialog" aria-labelledby="myModalLabel"属性；aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。另外，还应该为模态框添加描述性信息，即为.modal添加aria-describedby属性。

5.2.2 声明式用法