5.2.3　JavaScript用法

模态弹窗组件在JavaScript方面的一般用法是，传入可以拥有一部分可选参数的JavaScript对象字面量，用于初始化弹窗的一些自定义属性，以便控制个性化的弹窗效果。示例如下：

$('#myModal').modal({
    backdrop: true,
    keyboard: false
})

1. 属性

该组件默认支持的自定义属性如表5-2所示。其中和表5-1所示的声明式的自定义属性类似（以data-开头的文字去掉了，并且声明式里的href属性换成了remote属性）。

1. 参数

根据前面章节提到的，所有的JavaScript组件都支持传入特定字符串执行其内部方法的用法，字符串名称和用法描述如表5-3所示。

一般来说，参数字符串show用得比较多，因为都是要打开弹窗。特殊情况下，如果在弹窗上添加某些元素的触发事件，以便用户关闭弹窗，也可以使用hide字符串参数。toggle用得很少，因为弹窗一旦弹出就利用背景div元素阻止了其他非弹窗元素的单击事件，所以一般用不上。

需要注意的是，即便是使用了JavaScript的用法实现弹窗功能，也必须按照嵌套格式设置好弹窗所需要的div结构和样式，否则会出现意想不到的效果。

1. 事件

模态弹窗支持4种类型的事件订阅，分别对应模态弹窗的弹出前、弹出后、关闭前、关闭后，解释和用法如表5-4所示。

调用方式也很简单，和普通的jQuery代码并无二样。

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

注意

弹窗的标准用法要求开发人员必须事先把所需弹窗的div结构放在页面里，并且保持隐藏状态，以便调用时弹出，很多时候这样做不是很方便。在实战章节，我们会提供其他的方式，可以自己临时组装弹窗div代码，然后再弹出。