custombox.js 插件如何点空白处不隐藏弹出框 overlayClose属性的应用

最新推荐文章于 2024-05-19 09:36:17 发布

转载最新推荐文章于 2024-05-19 09:36:17 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webocean/p/7400231.html

文章标签：

#javascript #ViewUI

本文介绍如何在Bootstrap中使用custombox.js插件定制Modal框的行为，特别是通过设置data-overlayClose属性来控制点击空白区域时是否关闭Modal框的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap中使用了custombox.js 插件，如下代码

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，也可以实现不隐藏弹出框

转载于:https://www.cnblogs.com/webocean/p/7400231.html