title: HTML/CSS/JS - Overlay backgrounds for modal popups - Issues with
body: <p>I'm trying to add a semi-opaque overlay to my page that supports multiple modal popups.</p>
  
  <p>The three popup boxes open OK without the need for Javascript, and, with the help of some Javascript, they close by mouse-clicking outside the popups.
  Unfortunately, I can't get my overlay to work, without blocking the 'open-modal' buttons. I've tried wrapping the entire 'overlay' div around all the popup boxes, and I've tried keeping the popups outside of the overlay div.</p>
  
  <p>Is there a way to fix this without blocking access to the buttons, and without messing up the 'external close' feature as facilitated by the Javascript?
  Three files are attached: ‘.index.html’, ‘style.css’, and ‘modal-script.js’.
  Apologies if my terminology is sometimes ‘homespun’, but I’m just and enthusiast doing the best I can.</p>
  
  <p>My code so far is below in this same document. I would be grateful for any suggestions.</p>
  
  <hr>
  
  <p>HTML CODE:
  ~ Main Document</p>
  
  <hr>
  
  <p>CSS (STYLESHEET):
  ~ Modal Environment</p>
  
  <hr>
  
  <p>JAVASCRIPT:
  ~ External Close of Popup Boxes</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// JAVASCRIPT FILE: js/modal-script.js
  // Closes multi-modals in an HTML page
  
  // SET VARIABLES:
  var boxArray = ['box1','box2','box3'];
  // LISTEN FOR WINDOW EVENT
  window.addEventListener('mouseup', function(event){
    // LOOP...
    for(var i = 0; i &lt; boxArray.length; i++) { 
      var box = document.getElementById(boxArray[i]); 
      // IF...
      if(event.target != box &amp;&amp; event.target.parentNode != box){ 
        // THEN...
        box.style.display = 'none';
      }  // END IF/THEN STATEMENT
    }  // END LOOP
  });  // END EVENT</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* STYLESHEET FOR MODAL ENVIRONMENT */
  
  /* Pesets */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  a:link, a:visited {
    text-decoration: none;
  }
  
  p {
    margin-top: 0;
  }
  
  body {
    font-family: 'Halvetica', Arial, sans-serif; /* Default font family */
  }
  
  /* MODAL ENVIRONMENT */
  .modal { /* Format the 'modal-window', which is the modal environment background containing the 'modal-box(es)' */
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
  }
  
  .modal-content { /* Framework and default settings for popup boxes */
    position: absolute;
    background: #e2e2e2;
    width: 80%;
    height: 60%;
    top: 50%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, -50%);
    border-radius: 1em;
    display: none;
  }
  
  .modal:target { /* Where '.modal' is the target, make it visible */
    display: block;
  }
  
  .modal:target .modal-content { /* Where 'modal-content' inside of 'modal' is the target, make both visible */
    display: block;
  }
  
  /* MY POPUP BOXES */
  #box1 {
    
  }
  
  #box2 {
    
  }
  
  #box3 {
    
  }
  
  /* Formatting: */
  .button {
    width: 250px;
    height: 30px;
  }
  
  .type_1-button {
    width: 250px;
    height: 30px;
    font-size: 0.9em;
    font-weight: normal;
    color: #000;
    margin: 20px;
  }
  
  .type_1-button:hover {
    background: dodgerblue;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Multi-modal&lt;/title&gt;
      &lt;script src="modal-script.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!--Button controls to trigger pop-up boxes--&gt;
      &lt;button onclick="document.getElementById('box1').style.display = 'block'" class="type_1-button"&gt;Open Box 1&lt;/button&gt;
      &lt;button onclick="document.getElementById('box2').style.display = 'block'" class="type_1-button"&gt;Open Box 2&lt;/button&gt;
      &lt;button onclick="document.getElementById('box3').style.display = 'block'" class="type_1-button"&gt;Open Box 3&lt;/button&gt;
      &lt;!--MODAL CODE--&gt;
      &lt;div id="overlay" class="modal"&gt; &lt;!--Create modal window/environment/background--&gt;
        &lt;!--PROBLEM HERE... WHAT TO DO???--&gt;
      &lt;/div&gt; &lt;!--End 'overlay' div and 'modal' class--&gt;
      &lt;!--myBoxes: box1--&gt;
      &lt;div id="box1" class="modal-content"&gt; 
        &lt;h2&gt;Pop-out Interface - Box1&lt;/h2&gt; 
      &lt;/div&gt; &lt;!--End 'box1'--&gt;
      &lt;!--myBoxes: box2--&gt;
      &lt;div id="box2" class="modal-content"&gt; 
        &lt;h2&gt;Pop-out Interface - Box2&lt;/h2&gt;
      &lt;/div&gt; &lt;!--End 'box2'--&gt;
      &lt;!--myBoxes: box3--&gt;
      &lt;div id="box3" class="modal-content"&gt; 
        &lt;h2&gt;Pop-out Interface - Box3&lt;/h2&gt;
      &lt;/div&gt; &lt;!--End 'box3'--&gt;
      &lt;!--END MODAL CODE--&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>