按下退出键时需要关闭模态弹窗答案

【问题标题】：Need to close the modal popup window when pressing the escape key按下退出键时需要关闭模态弹窗
【发布时间】：2021-08-27 16:26:19
【问题描述】：

我已经做了一个模态框弹出功能，我想在有人按下退出键时关闭这个模态弹出框。如何通过按退出键关闭模式弹出窗口？请点击完整页面查看“运行代码 sn-p”！并且还需要隐藏第一张图片中的前一个键。谢谢。

function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  captionText.innerHTML = this.alt;
}

.modal {
  width: 58%;
  height: 100%;
  top: 0;
  position: fixed;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  margin-left: 300px;
  max-width: 779px;
  min-width: 779px;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.mySlides {
  display: none;
}

.close {
  position: relative;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  left: 584px;
  top: 90px;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.prev {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: -10%;
}

.next {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: 600px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Calcutta Public School > Photogallery</title>
</head>

<body>

  <tr>
    <div class="row">
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/user/erondu/1600x900" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
        </td>
      </div>
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
        </td>
      </div>
  </tr>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close cursor" onclick="closeModal()">&times;</span>

      <div class="mySlides">

        <img src="https://source.unsplash.com/user/erondu/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>

      <div class="mySlides">

        <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>
      <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>


</body>

</html>

【问题讨论】：

欢迎来到 SO！我建议所有新用户访问How to Ask，以获取有关以最能使社区提供帮助的方式形成问题的提示。我将您的代码移到了 sn-p 中，但它缺少结束标记；此外，有些东西阻止了 JS 正确执行。我建议在问题中使用功能性minimal reproducible example - 这将有助于页面访问者理解您的问题并让他们能够提供指导。祝你好运，编码愉快！
这可能是重复的，可以回答您的问题：Close modal on esc press (pure JS)
那么keypress/keydown的事件监听器在哪里？

标签： javascript html css

【解决方案1】：

试试这个，希望能解决问题

在 Javascript 中

document.addEventListener('keyup',function(e){
    if (e.key === "Escape") { 
        // hide modal code
        closeModal()
    }
});

在 Jquery 中

$(document).keyup(function(e) {
 if (e.key === "Escape") { 
    $('#myModal').modal('hide');
  }
});

【讨论】：