custombox.js 外掛程式如何點空白處不隱藏彈出框 overlayClose屬性的應用

標籤：tom   success   tar   應用   bootstra   ima   event   effect   nts   

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屬性的應用