Bootstrap Modal：如何重新启用键盘与背景遮罩功能

嘿，这个问题我之前也踩过坑！Bootstrap的模态框在第一次初始化完成后，直接再次调用$(modal).modal({ backdrop: true, keyboard: true })是没用的——这个方法在模态框已经初始化的情况下，只会执行显示/隐藏这类操作，不会重新覆盖原有的配置项。

下面给你两种优雅的解决思路：

方法一：直接修改模态框实例的配置与事件 #

Bootstrap会把模态框的实例存在元素的bs.modal数据中，我们可以直接修改它的配置，再按需重新绑定事件：

// 获取已初始化的模态框实例
const modalInstance = $(modal).data('bs.modal');

// 更新配置项
modalInstance.options.backdrop = true;
modalInstance.options.keyboard = true;

// 如果模态框当前是显示状态，需要重新绑定ESC关闭事件
if (modalInstance.isShown) {
  // 先解绑之前可能存在的禁用事件
  $(document).off('keydown.dismiss.bs.modal');
  // 重新绑定ESC触发关闭的逻辑
  $(document).on('keydown.dismiss.bs.modal', function (e) {
    if (e.which === 27 && modalInstance.options.keyboard) {
      modalInstance.hide();
    }
  });
}

至于背景遮罩，只要更新了backdrop配置，下次点击遮罩时Bootstrap会自动检查这个配置，不需要额外操作。

方法二：销毁实例后重新初始化（简洁版） #

如果你的场景不需要保留模态框当前的状态（比如不需要维持显示状态），可以直接销毁现有实例再重新初始化，这种方式代码更简洁：

// 销毁已有的模态框实例
$(modal).modal('dispose');
// 重新初始化并启用所需配置
$(modal).modal({ backdrop: true, keyboard: true });

// 如果需要重新显示模态框，追加.show()即可
// $(modal).modal({ backdrop: true, keyboard: true }).modal('show');

注意：销毁实例会让当前显示的模态框隐藏，所以如果要保持显示状态，记得重新初始化后调用modal('show')。

要是你用的是Bootstrap 5，API基本一致，上面的代码也完全适用~

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