我正在尝试在 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;
}

最佳答案

在页面加载时为模态添加事件监听器,而不是在模态可见时。此外,使用 keydown 事件而不是 keypress ,因为在某些浏览器中,keypress 事件仅在按键输出字符时触发

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

关于javascript - 在 esc press 上关闭模态(纯 JS),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51293224/

10-12 00:50
查看更多