如何通过Esc按键正确关闭多层Bootstrap模态表单？

你的问题根源在于Bootstrap 3默认的Esc按键监听逻辑和你自定义的z-index修复不兼容，同时你额外添加的监听又和默认监听冲突，导致按下Esc时可能触发多个关闭操作。下面是具体的解决方案：

核心思路 #

1. 移除Bootstrap原生的模态框Esc按键监听，避免冲突
2. 重新实现Esc按键逻辑，只针对当前最上层（z-index最高）的模态框执行关闭操作
3. 确保和你已有的z-index修复代码兼容

完整修复代码 #

// 保留你原有的模态框z-index叠加修复（来自@A1rPun）
$(document).on('show.bs.modal', '.modal', function () {
  var zIndex = 1040 + (10 * $('.modal:visible').length);
  $(this).css('z-index', zIndex);
  setTimeout(function() {
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
  }, 0);
});

$(document).on('hidden.bs.modal', '.modal', function () {
  $('.modal:visible').length && $(document.body).addClass('modal-open');
});

// 覆盖Bootstrap默认的Esc按键处理逻辑
$(document).off('keydown.bs.modal'); // 先移除原生监听
$(document).on('keydown.bs.modal', function(e) {
  if (e.which === 27) { // 监听Esc按键（keyCode 27）
    // 找到所有可见模态框，按z-index从高到低排序，取最上层的那个
    const topModal = $('.modal:visible').sort((a, b) => {
      return parseInt($(b).css('z-index'), 10) - parseInt($(a).css('z-index'), 10);
    }).first();

    if (topModal.length) {
      topModal.modal('hide'); // 使用Bootstrap原生方法关闭，保证行为一致
      e.stopPropagation(); // 阻止事件冒泡，避免其他监听触发
    }
  }
});

为什么你的原有代码会出问题？ #

• Bootstrap 3默认会给每个模态框绑定keydown.bs.modal事件，按下Esc时会触发自身的关闭逻辑。但因为你修改了z-index，DOM顺序和视觉层级不一致，导致默认逻辑会关闭最早打开的模态框（而不是最上层的）。
• 你额外添加的监听和原生监听同时生效，有时会导致两次关闭操作，进而关闭两个模态框。

关键细节说明 #

• 使用modal('hide')而非模拟点击关闭按钮：这个方法会触发Bootstrap的完整隐藏流程（包括移除遮罩、更新body类名等），比手动点击更可靠。
• e.stopPropagation()：确保Esc事件只被我们的逻辑处理，不会传递给其他可能存在的监听。
• 按z-index排序：严格按照视觉层级找到最上层的模态框，保证关闭的是用户当前看到的那个。

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