custombox.js 插件如何点空白处不隐藏弹出框 overlayClose属性的应用
bootstrap中使用了custombox.js 插件,如下代码
<button href="/systems/application/add" data-target="custom-modal" type="button" class="btn_common btn-success waves-effect waves-light" data-animation="fadein" data-overlaySpeed="200" data-overlayColor="#36404a" data-overlayClose="" data-plugin="custommodal">
添加
</button>
data-overlayClose=""
这里一定是空的,不要写任何内容,这样就可以弹出框点空白处不隐藏了
具体可以看jquery.core.js 文件中的 这个函数 jquery.core.js文件是我用的模板中的一个文件
Components.prototype.initCustomModalPlugin = function() {
$('[data-plugin="custommodal"]').on('click', function (e) {
Custombox.open({
target: $(this).attr("href"),
effect: $(this).attr("data-animation"),
overlaySpeed: $(this).attr("data-overlaySpeed"),
overlayColor: $(this).attr("data-overlayColor"),
overlayClose: Boolean($(this).attr("data-overlayClose")) —— 这里直接写false,也能实现隐藏,但是无法在cshtml文件中控制,还是不要直接写false
});
e.preventDefault();
});
}
具体还可以参考custombox.min.js 文件内的一段代码 a.get().settings.overlayClose 这里获得上边的配置,实现是否可以点空白隐藏弹出框
最终还是靠overlayClose这个属性,解决了问题
data-overlayClose="true" 可以点空白处隐藏弹出框
data-overlayClose=""
点空白出不隐藏弹出框
如果中我的框架内,把这个属性去掉 overlayClose: Boolean($(this).attr("data-overlayClose")) 因为这里是空的,找不到这个属性,值就是false,也可以实现不隐藏弹出框