JavaScript新手求助：如何通过ESC键关闭Modal弹窗

嘿，作为JavaScript新手能搞定点击关闭Modal已经很棒啦！要添加ESC键关闭的功能其实非常简单，咱们只需要全局监听键盘按键事件，判断是否按下了ESC键，再配合你已有的Modal控制逻辑就行。

核心思路 #

• 给document或window添加keydown事件监听，这样能捕获全局的按键操作
• 判断按下的按键是否为ESC键：推荐使用event.key === 'Escape'（比旧的键码27兼容性更好，语义也更清晰）
• 只有当Modal处于显示状态时，才执行关闭操作，避免无效触发

整合到你的现有代码中 #

下面是完整的代码示例，我已经把新增的ESC功能和你提供的代码结合起来了：

// 你已有的元素获取代码
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var img2 = document.getElementById('myImg2');
var img3 = document.getElementById('myImg3');
var img4 = document.getElementById('myImg4');
var modalImg1 = document.getElementById("img01");
var captionText = document.getElementById("caption");

// 你已有的打开Modal的点击事件（补全了省略的部分）
img.onclick = function() {
  modal.style.display = "block";
  modalImg1.src = this.src;
  captionText.innerHTML = this.alt;
};
// 其他图片的点击事件可以按同样逻辑处理
img2.onclick = function() {
  modal.style.display = "block";
  modalImg1.src = this.src;
  captionText.innerHTML = this.alt;
};
// img3、img4同理...

// 你已有的关闭Modal的span点击事件（假设你的关闭按钮是带.close类的元素）
var closeBtn = document.querySelector('.close');
closeBtn.onclick = function() {
  modal.style.display = "none";
};

// 👇新增的ESC键关闭功能
document.addEventListener('keydown', function(event) {
  // 检查是否按下ESC键，且Modal当前处于显示状态
  if (event.key === 'Escape' && modal.style.display === 'block') {
    modal.style.display = 'none';
  }
});

优化小技巧：复用关闭逻辑 #

如果以后你需要修改关闭Modal的逻辑（比如添加淡出动画），可以把关闭操作抽成一个独立函数，这样不用多处修改：

// 封装关闭Modal的函数
function closeModal() {
  modal.style.display = 'none';
}

// 修改span的点击事件
closeBtn.onclick = closeModal;

// ESC事件里直接调用函数
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape' && modal.style.display === 'block') {
    closeModal();
  }
});

这样代码更整洁，维护起来也更方便😉

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