按下esc键关闭弹出框（纯JS）

Question

我想让我的模态框在按下ESC键时关闭（删除设置为display: block的类）。以下是我尝试过的代码（不起作用并且破坏了我的其余代码）：

if (modal.classList.contains('modal-visible')) {
  document.addEventListener('keypress', function(e) {
    let keyCode = e.keyCode;
    if (keyCode === '27') {
      modal.classList.remove('modal-visible');
    }
}

以下是我JS文件中用于模态框的其他代码:

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

如果需要的话，这是我的模态框CSS:

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

- nCardot

---

嗨，Natalie！在你的第一个代码片段中，你不需要if检查。你想设置一个监听器，以便每当按下escape键时，modal-visible类都会被移除。 此外，如果if检查为false，则根本不会创建监听器！ 最后，请检查您的第一个代码片段中的括号和方括号是否匹配。它们看起来不匹配，这可能是导致代码出错的原因 :) - Andrey

如果 (keyCode === 27) 的话，会更好，不是吗？ - user1596522

Answer 1

当页面加载时为模态框添加事件监听器，而不是在模态框可见时再添加。此外，在某些浏览器中，只有键输出字符时才会触发 keypress 事件，因此请使用 keydown 事件。

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

<div id="modal" class="modal modal-visible" style="border: 2px solid black; width: 100px; height: 100px;"></div>
<script>
var modal = document.getElementById("modal");
document.addEventListener('keydown', function(e) {
    let keyCode = e.keyCode;
    document.getElementById("result").innerHTML = "Key Code: "+keyCode+"<br/> Key: "+e.key+"<br/>";
    if (keyCode === 27) {//keycode is an Integer, not a String
      modal.classList.remove('modal-visible');
      document.getElementById("result").innerHTML += "Escape key pressed. Modal hidden.";
    }
});
</script>
<div style="width: 100%; text-align: center;">
 <span id="result"></span>
</div>

- Unmitigated

---

关键字 keycode 现已被弃用。 - Coastal-Cam

Answer 2

如果只有在模态框可见时才创建事件监听器，那么它将永远不会被创建。之后使模态框可见不会重新执行您的代码。if检查已经发生，已经失败，并且keydown的事件监听器已经没有被创建。在任何时候都不会被创建。

var x = 2;
if (x === 1) {
  alert('yes');
}
x = 1;

在上面的示例中，即使 x 最终变为 1，警报也永远不会发生。同样，您的事件侦听器也永远不会被创建。

同时，keyCode 是一个整数，而不是字符串。您将想要使用 27 而不是 '27'。

- Charles Stover