如何通过JavaScript模拟ESC键关闭模态框？现有代码无效求解决

问题原因 #

你用document.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'}))模拟按键无效，是因为Bootstrap的模态框关闭逻辑会检查事件的isTrusted属性——只有用户真实触发的事件（比如手动按ESC）这个属性才会是true，而通过代码创建的事件默认isTrusted为false，会被Bootstrap忽略。

解决方案 #

方法1：直接调用Bootstrap模态框API（推荐） #

这是最可靠的方式，不需要模拟事件，直接利用Bootstrap提供的公开方法关闭模态框：

// 关闭所有已打开的模态框
document.querySelectorAll('.modal.show').forEach(modalElement => {
  const modalInstance = bootstrap.Modal.getInstance(modalElement);
  if (modalInstance) {
    modalInstance.hide();
  }
});

如果目标是特定模态框（比如已知ID为myModal），可以简化为：

bootstrap.Modal.getInstance('#myModal').hide();

方法2：模拟可信的键盘事件（仅当必须模拟按键时使用） #

由于KeyboardEvent构造函数无法直接设置isTrusted，需要用旧的createEvent方法创建可信事件（注意部分浏览器可能有兼容性限制）：

const escEvent = document.createEvent('KeyboardEvent');
escEvent.initKeyboardEvent(
  'keydown',
  true,    // bubbles
  true,    // cancelable
  window,  // view
  'Escape',// key
  0,       // location
  '',      // modifiers
  false,   // repeat
  ''       // locale
);
document.dispatchEvent(escEvent);

内容的提问来源于stack exchange，提问作者ᴜɴᴅᴇғɪɴᴇᴅ