如何使用JS实现按下ESC键关闭modal弹出窗口？

你只需要在现有JavaScript代码的末尾添加以下监听逻辑即可实现需求：

document.addEventListener('keydown', function(e) {
  const modalEle = document.getElementById('myModal')
  // 仅当按下ESC键且弹窗处于显示状态时执行关闭
  if (e.key === 'Escape' && modalEle.style.display === 'block') {
    closeModal()
  }
})

逻辑说明 #

• 我们给整个页面绑定了键盘按下事件，每次按键都会触发校验
• 同时判断两个触发条件：按下的按键为ESC、当前弹窗处于打开状态，避免误触发关闭逻辑
• 满足条件时直接调用你已经封装好的closeModal方法关闭弹窗，无需修改原有功能逻辑

如果需要兼容低版本IE浏览器，可以将e.key === 'Escape'替换为e.keyCode === 27即可。

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