如何动态修改Custombox模态框的overlay.close属性使其生效于当前实例？

我之前也碰到过这个情况，Custombox的overlay.close属性默认是在模态框初始化时就完成事件绑定的，所以直接修改配置值不会自动作用于当前已经打开的模态框。不过我们可以通过操作模态框实例或者手动控制遮罩事件来实现即时生效的效果，下面是两种可行的方案：

方案一：保存模态框实例并修改配置+更新事件绑定 #

首先在打开模态框的时候，一定要保存好实例引用，这样后续才能直接操作它：

// 打开模态框时保存实例对象
let currentModal = new Custombox.modal({
  overlay: {
    close: true // 初始允许点击遮罩关闭
  },
  content: {
    target: '#your-modal-content' // 你的模态框内容容器选择器
  }
}).open();

然后在模态框内部按钮的点击事件里，直接修改实例的配置，并手动更新遮罩的点击事件：

// 绑定模态框内按钮的点击事件
document.querySelector('#inner-toggle-btn').addEventListener('click', function() {
  // 切换overlay.close的状态，这里以设为false为例
  currentModal.options.overlay.close = false;
  
  // 移除遮罩上原有的关闭事件（Custombox默认绑定的close方法）
  const overlay = document.querySelector('.custombox-overlay');
  overlay.removeEventListener('click', currentModal.close);
  
  // 如果之后需要恢复允许关闭的功能，可以再重新绑定事件：
  // overlay.addEventListener('click', currentModal.close.bind(currentModal));
});

方案二：通过事件委托拦截遮罩点击 #

这种方式不需要依赖实例引用，直接通过全局事件委托来判断是否允许关闭：

// 全局监听遮罩点击事件
document.addEventListener('click', function(e) {
  // 判断点击的是遮罩层
  if (e.target.classList.contains('custombox-overlay')) {
    // 获取当前活跃的模态框实例（Custombox会把当前实例存在Custombox.modal.current里）
    const activeModal = Custombox.modal.current;
    // 根据当前配置决定是否关闭
    if (!activeModal || activeModal.options.overlay.close) {
      activeModal.close();
    }
  }
});

// 模态框内按钮的点击事件
document.querySelector('#inner-toggle-btn').addEventListener('click', function() {
  // 直接修改当前活跃模态框的配置
  Custombox.modal.current.options.overlay.close = false;
});

这两种方法都能让overlay.close的修改即时生效于当前打开的模态框，你可以根据自己的代码结构选择更合适的方案~

内容的提问来源于stack exchange，提问作者gdfgdfg