无法使用ESC键关闭模态窗口，求JavaScript代码修改指导

没问题！我来帮你快速实现ESC键关闭模态窗口的功能，只需要在现有代码后面添加一小段键盘事件监听的代码就行～

修改后的完整代码 #

var modal = document.getElementById('myModal');
var imgs = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (var i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener('click', e => {
    modal.style.display = "block";
    modalImg.src = e.target.src;
    captionText.innerHTML = e.target.alt;
  });
}

var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

// 新增：监听ESC键关闭模态窗口
document.addEventListener('keydown', function(event) {
  // 判断是否按下的是ESC键（两种写法兼容不同浏览器）
  if (event.key === 'Escape' || event.keyCode === 27) {
    // 只有当模态窗口显示时才执行关闭
    if (modal.style.display === "block") {
      modal.style.display = "none";
    }
  }
});

代码说明 #

• 我们给整个文档添加了一个keydown事件监听器，捕捉用户的键盘操作
• 同时判断按下的键是否为ESC键（event.key === 'Escape'是现代标准写法，event.keyCode === 27是兼容性写法，一起用覆盖更多场景）
• 额外加了一层判断：只有当模态窗口处于显示状态（display: block）时，才执行关闭操作，避免不必要的触发

这样你点击图片打开模态窗口后，按下ESC键就能直接关闭它啦，和点击右上角的X按钮效果一样～

内容的提问来源于stack exchange，提问作者Валери К.