How can i close the modal pop up window by clicking escape button using js

Question

I have made a modal box popup functionality. I want to close the modal popup window when the escape button is pressed. I've tried all the logic but couldn't do it. Please help have to do it. I know it is simple I'm new to js. Coudn't do it using js

Please see the 'run code snippet' by clicking on the full page view!

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 (var i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }
          for (var i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
          }

          if (slideIndex == 1) {
            document.getElementById("next1").hidden = false;
          } else {
            document.getElementById("next1").hidden = true;
          }

          if (slideIndex == (slides.length)) {
            document.getElementById("prev1").hidden = false;
          } else {
            document.getElementById("prev1").hidden = true;
          }

          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;
    }

<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 id="myModal" class="modal modal-visible">
    <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;">
      </div>
      <div class="mySlides">
        <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
      </div>
      <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" id="next1" onclick="plusSlides(1)">&#10095;</a>
      <div style="width: 100%; text-align: center;">
        <span id="result"></span>
       </div>