1.backdrop为static/false时,点击模态对话框的外部区域不会将其关闭。
keyboard为false时,按下 Esc 键不会关闭 Modal。
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
backdrop | boolean 或 string 'static' 默认值:true | data-backdrop | 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。 |
keyboard | boolean 默认值:true | data-keyboard | 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。 |
show | boolean 默认值:true | data-show | 当初始化时显示模态框。 |
remote | path 默认值:false | data-remote | 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a> |
事件
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
---|---|---|
show.bs.modal | 在调用 show 方法后触发。 | $('#identifier').on('show.bs.modal', function () { // 执行一些动作... }) |
shown.bs.modal | 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 | $('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) |
hide.bs.modal | 当调用 hide 实例方法时触发。 | $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) |
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) |
$(this.$el).modal({backdrop:'static'}).on('hidden.bs.modal', function () { Store.commit('destoryComponent'); });
代码解读:这个模态框当点击外部阴影时不会关闭,并且在关闭后触发事件 Store.commit('destoryComponent');