如何在Bootstrap v5中用JavaScript修改模态框的data-bs-keyboard属性？

核心问题 #

网站启动时模态框实例尚未创建，无法通过修改实例_config属性设置keyboard（ESC键关闭）状态，直接访问$('#myModal').data('bs.modal')也会因实例不存在而失效。

可行解决方案 #

1. 提前修改DOM的data属性（推荐）

Bootstrap模态框初始化时会读取DOM上的data-bs-keyboard属性，直接修改该属性可确保第一次初始化时生效：

// 根据设置面板的值，传入'true'或'false'
$('#myModal').attr('data-bs-keyboard', 你的设置值 ? 'true' : 'false');

2. 监听模态框初始化前事件动态配置

利用show.bs.modal事件（模态框显示/初始化前触发），在事件中动态创建或修改实例配置：

// 绑定事件，确保模态框每次初始化前应用设置
$('#myModal').on('show.bs.modal', function() {
  // 从设置面板获取状态，比如全局变量/localStorage
  const allowEscClose = 你的设置面板状态;
  
  // 获取已有实例或创建新实例并传入配置
  const modalInstance = bootstrap.Modal.getInstance(this) || new bootstrap.Modal(this, {
    keyboard: allowEscClose
  });
  
  // 实例已存在时直接更新内部配置
  if (modalInstance) {
    modalInstance._config.keyboard = allowEscClose;
  }
});

3. 全局覆盖默认配置（全站模态框生效）

如果网站所有模态框都需要遵循该设置，可在网站启动时覆盖Bootstrap模态框的默认配置：

// 网站初始化时执行，根据设置面板值设置全局默认
const defaultKeyboard = 你的设置面板状态;
bootstrap.Modal.Default.keyboard = defaultKeyboard;

为什么之前的代码无效 #

• 模态框实例未创建时，$('#myModal').data('bs.modal')返回undefined，直接访问_config会抛出错误；
• _config是模态框实例的内部属性，只有实例创建完成后才能修改，网站启动时实例未初始化，因此无法生效。

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