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

Posted 2020-10-03 贵达

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