當我關閉模態覆蓋圖時，無法隱藏消息框

Question

我正嘗試創建自己的模態覆蓋圖。如果你不知道這是什麼，這是一個效果，如果你通過點擊某個元素來激活某個元素，屏幕上將顯示一個黑色的不透明覆蓋圖，通常一個消息框將位於覆蓋圖的中心。我想我已經成功完成了模態疊加。但是，每當我點擊疊加層時，疊加層將變爲隱藏，但消息框仍將顯示。我查看了我的調試工具，css說消息框被認爲是隱藏的。不過，我仍然在屏幕上看到它。

CSS

div.overlay{ height:100%; width:100%; margin:0; padding:0; background:rgba(40, 0, 77,0.7); position:fixed; 
z-index:100; top:0; left:0; display:none;} 

div.rela{height:100%; width:100%; margin:0; padding:0; position:relative; z-index:101;} 

div.rela span{ position:absolute; top:0; left:98%; font-weight:bold; font-size:36px; } 

div.rela span a{ color:white; text-decoration:none; z-index:152;} 

div#message{width:40%; height:20%; background:white; text-align:center; 
border:1px solid black; font-weight:bold;display:none; z-index:102;} 

div#message h5{font-size:18px;} 

HTML

<div class="overlay"> 
<div class="rela"> 
<span><a href="#">X</a></span> 
</div> 
</div> 

<div id="ex3"><h2>Example 3</h2><p></p><h4>results:</h4> 
<button id="overlay-on">Open up the overlay</button> 
<div id="message"> 
<h5>Title</h5> 
<p>Width is:</p> 
</div> 
</div> 

的Javascript

/* This is for clicking off the overlay */ 
(function removeOverlay(){ 
document.querySelector('div.overlay span a').onclick = function() 
{ 
    document.querySelector('div.overlay').style.display ="none"; 
    console.log('I am closing') 
}; 

document.querySelector('div.overlay').addEventListener('click', function(){ 

this.style.display ="none"; 
console.log('Im closing with overlay'); 

}); 

})(); 

document.querySelector('button#overlay-on').addEventListener('click',function(){ 

var overlay = document.querySelector('div.overlay'); 
overlay.style.display = "block"; 

var message = document.querySelector('div#message').outerHTML; 
var relative = document.querySelector('div.rela'); 


document.getElementById('message').setAttribute('style','position:absolute; display:block; top:10%; '); 
var text = document.createTextNode(document.getElementById('message').offsetWidth); 
document.querySelector('div#message p').appendChild(text); 
console.log(message); 
relative.innerHTML = relative.innerHTML + message ; 


}); 

Answer 1

你只需把消息框的模式裏面。

<div class="overlay"> 
    <div class="rela"> 
    <span><a href="#">X</a></span> 
    </div> 
    <div id="message"> 
    <h5>Title</h5> 
    <p>Width is:</p> 
    </div> 
</div> 

<div id="ex3"> 
    <h2>Example 3</h2> 
    <p></p> 
    <h4>results:</h4> 
    <button id="overlay-on">Open up the overlay</button> 

</div> 

或者圍繞消息框包裝模態。

<div id="ex3"> 
    <h2>Example 3</h2> 
    <p></p> 
    <h4>results:</h4> 
    <button id="overlay-on">Open up the overlay</button> 
    <div class="overlay"> 
    <div class="rela"> 
     <span><a href="#">X</a></span> 
    </div> 
    <div id="message"> 
     <h5>Title</h5> 
     <p>Width is:</p> 
    </div> 
    </div> 
</div> 

Fiddle