关闭模式叠加层时无法隐藏消息框

Question

I'm trying to create my own modal overlay. If you don't know what that is, it is an effect where you if you activate a certain element by clicking on it an black opaque overlay will show up on your screen, and usually a message box will be in the center of the overlay. I think I have successfully done the modal overlay. However, whenever I click out of the overlay the overlay will become hidden but the message box will still be shown. I looked into my debugging tools and the css says the message box is supposedly hidden. However, I still see it on the screen.

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

You just need to put the message box inside the modal.

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

Or wrap the modal around the message box.

<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