Question

我正在使用Custombox作为模态。我有一个按钮，当它被点击时，模态是打开的：

    var regModal = new Custombox.modal({
    content: {
        effect: 'fadein',
        target: '#reg',
        container: "#target",
    },
    overlay:{
        close: true
    }

});

$('#regBtn').click(function(e){
    e.preventDefault();
    regModal.open();
});

这个模态有另一个按钮。我希望单击此按钮以防止或不覆盖点击时关闭模式。这个属性是：

regModal.options.overlay.close

问题在于，当我将其设置为false（覆盖点击时没有关闭模式）时，如下所示：

regModal.options.overlay.close = false

，它不适用于当前模态，但在关闭当前模式后应用于下一模态。有没有办法动态更改overlay.close属性？

Answer 1

你试过这个：

$('#regOtherBtn').click(function(e){
    e.stopPropagation();
    regModal.options.overlay.close = false
});

Answer 2

解决方案是将click事件绑定到覆盖自定义逻辑以关闭模式：

var regModal = new Custombox.modal({
    content: {
        effect: 'fadein',
        target: '#reg',
        container: "#target",
    },
    overlay:{
        close: false // Do not close on overlay click
    }

});
var closeOnClick = false;
$('#modalBtn').click(function(e){
    closeOnClick = true;
});
// Bind a click event to overlay
$('body').on('click', '.custombox-content', function (e) {
    // If overlay is clicked and closeOnClick is true. close the modal
    if($(e.target).hasClass('custombox-content') && closeOnClick ){
        Custombox.modal.close();
    }
});

动态设置属性叠加 - CustomBox

2 个答案: