title: How to create a custom modal popup - and how to close it clicking outside of it
body: <pre><code>&lt;a href="javascript:void(0)" onclick = "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'"&gt;&lt;button type="button" name="" value="" id="readmorelink3"&gt;+&lt;span class="rmore"&gt;Read More&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I'm using the above DOM classic <code>onClick</code> to simply display divs as a simple pop-up. I have created a close button within the div but I would also like to have the open divs <code>hide</code> when the user clicks the <code>body</code> or anywhere that isn't the open div. I have tried absolutely everything -- </p>
  
  <p>My simple Overlay (1 of 3)</p>
  
  <pre><code>&lt;!-- read more overlays 1 --&gt;
  
  &lt;div id="light" class="white_content"&gt;
  
  &lt;a class="close" href="javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="textright" style="color: #DDD !important; float:right;"&gt;CLOSE X&lt;/a&gt;
  
  &lt;h4&gt;[Hey+]&lt;/h4&gt;
  &lt;h3&gt;Demo&lt;/h3&gt;
  &lt;h3&gt;SUP&lt;/h3&gt;
  &lt;span&gt; 2.5 fl. oz.&lt;/span&gt;&lt;br&gt;
  &lt;br&gt;
  &lt;p&gt;
  Cool content, about cool things.
  &lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;!-- // read more overlays 1--&gt;
  </code></pre>
  
  <p><em>I tried this guy:</em></p>
  
  <pre><code>$(document).click(function() {
      $('#mydiv').fadeOut(300);
  });
  </code></pre>
  
  <p><em>I've messed with this guy:</em></p>
  
  <pre><code> if($('#mydiv').is(":not(:visible)") ){
  </code></pre>
  
  <p><em>// and visa versa if visible etc</em></p>
  
  <hr>
  
  <p>Also have tried.</p>
  
  <pre><code> // To prevent hide #menu when click on #main
      $('#mydiv').click(function (e) {
          e.stopPropagation();
  });
  
   // Click outsite of #menu
      $('html').click(function () {
      $('#mydiv').hide();
  });
  </code></pre>
  
  <p><em>Realizing I have should have done this with simple jQuery and not inline; but I don't want to redo everything so seeking DOM / JavaScript solution. Simply to close the open or display: block divs > when they are displayed, by in addition clicking outside of the element or on body tag.</em> </p>
  
  <p><em>EG</em>: DIV OVERLAY IS DISPLAYED > CLICK OUTSIDE OF ELEMENT AND IT CLOSES. I ADDED ONCLICK CLOSE BUTTON TO THE BODY TAG, BUT IT KILLED POPUP ENTIRELY, ADDED A WRAPPER, NO CIGAR.</p>