Bootstrap modal 多弹窗之叠加实现ESC快捷键关闭窗口

本文链接：https://blog.csdn.net/OldLock/article/details/77942553

本文介绍了解决Bootstrap Modal组件在多层叠加时ESC键无法正常关闭的问题。通过手动聚焦到下一个Modal来确保ESC键的功能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有同学Email，当多个窗口叠加，ESC快捷键无法实现关闭窗口问题，就是不起作用，这里我给解答下

记住官方给的提示 ‘最好不要多个modal叠加很容易出现很难解决的前端组件问题’ 这里出现的ESC关闭功能也是其中之一

官方单个组件已经给了相应的功能

keyboard

boolean
默认值：true

data-keyboard

当按下 escape 键时关闭模态框，设置为 false 时则按键无效。

$(function () { $('#myModal').modal({
keyboard: true
})});

单个组件modal使用，不会出现问题，当多个窗口叠加，要么出现一次全部关闭，要么出现关闭后，阴影遮罩问题，当然还会出现其他奇葩问题。

这里阴影遮罩请查看上篇，这里我给的解决方案当然是在解决阴影遮罩基础上，消灭这个问题。

请仔细观察，bootstrap modal css 特性，当没有打开modal 时候 css使用的是 modal fade，当打开modal时候，会添加in，添加in 特性

所以当关闭上层modal时候，请检测div层，也就是遮罩层fade modal，使下层modal获得焦点，自动获取组件ESC关闭功能。

这里有人问了，为啥要再次获取焦点----多窗口叠加，当关闭第一层窗口时候，焦点丢失，不会自动在第二层modal，所以需要手动再次获取焦点在下层modal上，ESC组件关闭功能自动实现

还有人问了，我第一个窗口ESC都不起作用--- 请查看div 是否设置正确

具体实例：

$('.mapped_feature').live('click', function(e) {
  $("#body").append("<div class='fade modal' id='model_dialog'  tabindex='-1' role='dialog' />");
  $("#body").children().last().append($(this).next().html());
  $("#body").children().last().modal();
});

$("#model_dialog").live('hidden.bs.modal',function(){
$("#body").children().last().remove();
if ($("#body").children().last().attr("class") == "fade modal in"){
$("#body").children().last().focus();
}
});

Eric

oldlock1988@163.com