1. 程式人生 > >custombox.js 插件如何點空白處不隱藏彈出框 overlayClose屬性的應用

custombox.js 插件如何點空白處不隱藏彈出框 overlayClose屬性的應用

tin dal clas lean prevent fec 彈出 false comm

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,也可以實現不隱藏彈出框

custombox.js 插件如何點空白處不隱藏彈出框 overlayClose屬性的應用