Bootstrap 3转4：修改已打开Modal的backdrop/keyboard配置失效问题

我之前在把Bootstrap 3模态框升级到4的时候，也碰到过一模一样的问题——原来直接改options的方法完全失效，改_config又没实际效果。后来翻了Bootstrap 4的模态框源码才搞明白：Bootstrap 4在模态框show阶段会根据当时的配置一次性绑定键盘监听、backdrop点击事件，之后修改_config只是改了变量，不会触发这些绑定的更新，所以才会看起来配置没生效。

下面给你两个可行的解决思路：

方法一：直接修改实例配置并手动更新事件绑定 #

如果模态框已经处于打开状态，我们需要先更新_config，再手动调整对应的事件监听：

修改keyboard（ESC关闭）选项 #

// 获取模态框实例
const modal = $('#your-modal-id').data('bs.modal');

// 移除原有的ESC按键监听
$(document).off('keydown.bs.modal', modal._handleEscape);

// 更新配置（false=禁用ESC关闭，true=启用）
modal._config.keyboard = false;

// 如果新配置是启用ESC，重新绑定监听
if (modal._config.keyboard) {
  $(document).on('keydown.bs.modal', modal._handleEscape.bind(modal));
}

修改backdrop（点击背景关闭）选项 #

const modal = $('#your-modal-id').data('bs.modal');

// 更新配置（'static'=点击背景不关闭，true=点击关闭，false=无背景）
modal._config.backdrop = 'static';

const backdrop = modal.$backdrop;
if (backdrop) {
  // 移除原有的背景点击监听
  backdrop.off('click.dismiss.bs.modal');
  
  // 如果配置是允许点击背景关闭，重新绑定关闭事件
  if (modal._config.backdrop === true) {
    backdrop.on('click.dismiss.bs.modal', $.proxy(modal.hide, modal));
  }
}

方法二：隐藏模态框后修改配置再重新显示 #

如果业务允许短暂隐藏模态框，这种方法更简单，因为重新show的时候会自动根据新配置绑定事件：

const $modal = $('#your-modal-id');
const modal = $modal.data('bs.modal');

// 先隐藏模态框
modal.hide();

// 直接修改配置
modal._config.keyboard = false;
modal._config.backdrop = 'static';

// 重新显示模态框，此时新配置会生效
modal.show();

为什么Bootstrap 3的方法在4里失效？ #

Bootstrap 3的模态框实例会把配置存在options属性里，并且在运行过程中会实时读取这个值；但Bootstrap 4把配置移到了_config，而且只在初始化和show的关键节点读取配置来绑定事件，后续修改_config不会触发重新绑定，所以才会出现“配置改了但没效果”的情况。

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