Javascript: Close a model with 'Escape' key

#1

Hello,

I’m struggling to get my head around how to close a modal with the escape key. I’ve looked at so many solutions that DON’T work that my head is spinning! Can someone demonstrate for me how I might add Javascript code to the following modal so as to close it by pressing the ‘Escape’ key. It works fine with an external close, but I would like also to add the escape key option without upsetting the first method. Here is my code thus far:

HTML:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Close el</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container content-centered">
      <a href="#" class="openModal">Open modal</a>
    </div>
    <div class="modal">
      <div class="modal-box">
        <span class="closeModal">CLOSE</span>
        <p>You can close this popup by pressing close or pressing outside of it.</p>
      </div>
    </div>
    <!-- script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

body {
  font-family: 'Helvetica', Ariel, sans-serif;
}
body,
p {
  margin: 0;
}
.content-centered {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #87bfcc;
  background-size: cover;
}
a.openModal {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 30px;
  color: #fafafa;
  background: #43434387;
  padding: 20px;
}
a.openModal:hover {
  color: #fff;
  border-color: #24465557;
  background-color: #2c647c99;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.65);
}
.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #a7a7a7;
  color: #fff;
  margin: auto;
  padding: 15px;
  transition: 10.5s;
  font-size: 20px;
  text-align: center;
}
.closeModal {
  cursor: pointer;
}
.closeModal:hover {
  color: #000;
}

JAVASCRIPT:

var modal = document.getElementsByClassName("modal")[0];
var modalBox = document.getElementsByClassName("modal-box")[0];

var open = document.getElementsByClassName("openModal")[0];
var close = document.getElementsByClassName("closeModal")[0];

open.onclick = function() {
  modal.style.display = "block";
}

close.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(e) {
  if (e.target == modal) {
    modal.style.display = "none";
  }
}

PS: If you have a good solution to recommend, please don’t forget to tell me where to position the Javascript… in the Head section, in the Body, or somewhere inside the Modal code.

Thanks in advance.

Regards.

Adrian

#2

Hi @amac_web, you’d listen to a keydown event on the window, and if the key was “escape” close the modal:

var modal = document.querySelector('.modal')

window.addEventListener('keydown', function (event) {
  if (event.key === 'Escape') {
    modal.style.display = 'none'
  }
})

BTW I would suggest to generally replace those onclick assignments with addEventListener() calls (see here for details).

To the end of the body like all your JS. ;-)

1 Like