title: Close DIV popup clicking outside of it
body: <p>I have this code and I want to close this <code>&lt;div&gt;</code> popup by clicking outside of it and not only by clicking on the close button.</p>
  
  <p>How can I do that?</p>
  
  <pre><code>&lt;script language="JavaScript"&gt;
   &lt;!--
  function displayPopup(alert_MSG) {
  
      var theDetail = document.getElementById(alert_MSG);
          theDetail.style.display="block";
  }
  
  function closePopup(alert_MSG) {
  
      var theDetail = document.getElementById(alert_MSG);
  
      if (theDetail.style.display=="block") {
          theDetail.style.display="none";
      }
  }
  --&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the HTML link:</p>
  
  <pre><code>&lt;a href="javascript:displayPopup(&lt;?=$id_pic?&gt;)"&gt;open div here&lt;/a&gt;
  </code></pre>
  
  <p>And is here my popup:</p>
  
  <pre><code>&lt;div id="&lt;?=$id_pic?&gt;" class="myPopup" style="display:none;"&gt;
  &lt;div class="closeButton"&gt;
  &lt;a href="javascript:closePopup(&lt;?=$id_pic?&gt;)"&gt;Close&lt;/a&gt;
  &lt;/div&gt;
  Popup content here
  &lt;/div&gt;
  </code></pre>