モーダルオーバーレイを閉じるときにメッセージボックスを非表示にできません

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