title: Close modal on esc press (pure JS)
body: <p>I'm trying to get my modal to close (have a class that sets it to <code>display: block</code> removed) on an esc press. Here's what I tried (which doesn't work and breaks the rest of my code):</p>
  
  <pre><code>if (modal.classList.contains('modal-visible')) {
    document.addEventListener('keypress', function(e) {
      let keyCode = e.keyCode;
      if (keyCode === '27') {
        modal.classList.remove('modal-visible');
      }
  }
  </code></pre>
  
  <p>Here's the other code from my JS file for the modal:</p>
  
  <pre><code>const modal = document.getElementById('myModal');
  const closeIcon = document.querySelector('.close');
  
  // When called, adds class that sets modal to display: block when player reaches water
  function bringUpModal() {
    modal.classList.add('modal-visible');
  }
  
  // Closes modal (adding class that sets it back to display: none) upon user's clicking its close icon
  closeIcon.addEventListener('click', function() {
    modal.classList.remove('modal-visible');
  });
  
  // Opens modal when player reaches water
  Player.prototype.update = function(dt) {
      if (this.y === 25) {
          bringUpModal();
          this.y = 400;
      }
  };
  </code></pre>
  
  <p>Doubt this is needed, but just in case, here's my CSS for the modal as well:</p>
  
  <pre><code>.modal {
    display: none;
    width: 33%;
    height: 30%;
    margin: 0 auto;
    background-color: #f1f0f0;
    border: 1px solid #c5c4c4;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Added by function bringUpModal() */
  .modal-visible {
    display: block;
  }
  
  .modal-content {
    margin: 0 auto;
    padding: 30px;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  </code></pre>