Question

我有一个简单的模态，有两个div。当a）击中esc时，我希望它“接近”按键代码27，或b）点击外面。

我搜索了很多帖子，但是很多都是特定于js框架和/或在特定情况下不起作用。

我希望能够在esc或#emod div之外的任何点击中关闭它。

这就是我所拥有的：

<div id="emod-bg"></div><div id="emod"></div>

CSS

#emod-bg 
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d0d0d0;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}



#emod 
{          
    background-color: white;
    display: none;
    height: 480px;
    left: 50%;
    margin: -250px 0 0 -160px;
    padding: 10px;
    position: absolute;
    top: 50%;
    width: 320px;
    z-index: 1000;
}

...并按以下方式激活：

    document.getElementById('emod').style.display = "block";
    document.getElementById('emod-bg').style.display = "block";

Answer 1

要在按下转义键时关闭模式，只需在文档中添加keyup事件，然后检查事件对象的keyCode属性。

如果您想在点击背景时关闭模态，只需附加点击事件并将event.target与#emod-bg进行比较：

Example Here

var modal = document.getElementById('emod-bg');
modal.style.display = "block";

document.addEventListener('keyup', function (e) {
  if (e.keyCode === 27) {
    modal.style.display = 'none';
  }
});

modal.addEventListener('click', function (e) {
  if (e.target === e.currentTarget) {
    modal.style.display = 'none';
  }
});

使用Pure JS关闭2-Div模式

1 个答案: