用純JS關閉2-Div模態

Question

我有一個簡單的模態，它有兩個div。我希望在a）碰到esc時等「close」。按鍵代碼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事件添加到文檔中，然後c檢查事件對象的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'; 
    } 
});