title: Closing Popup by Clicking Anywhere Outside It
body: <p>I was able to successfully add a popup that loads automatically when the page loads:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//with this first line we're saying: "when the page loads (document is ready) run the following script"
  $(document).ready(function () {
    //select the POPUP FRAME and show it
    $("#popup").hide().fadeIn(1000);
  
    //close the POPUP if the button with id="close" is clicked
    $("#close").on("click", function (e) {
      e.preventDefault();
      $("#popup").fadeOut(1000);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*we need to style the popup with CSS so it is placed as a popup does*/
  #popup {
    display:none;
    position:absolute;
    margin:0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 50px 2px #000;
  }
  
  body {
    background:url('http://i.imgur.com/kO2Ffje.png?1') center top;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- let's call the following div as the POPUP FRAME --&gt;
  &lt;div id="popup" class="popup panel panel-primary"&gt;
  
    &lt;!-- and here comes the image --&gt;
    &lt;img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup"&gt;
  
    &lt;!-- Now this is the button which closes the popup--&gt;
    &lt;div class="panel-footer"&gt;
      &lt;button id="close" class="btn btn-lg btn-primary"&gt;Close button&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;!-- and finally we close the POPUP FRAME--&gt;
    &lt;!-- everything on it will show up within the popup so you can add more things not just an image --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(per <a href="https://stackoverflow.com/questions/26131542/how-do-i-make-an-image-automatically-popup-on-my-main-page-when-someone-goes-to/">How do I make an image automatically popup on my main page when someone goes to it?</a>'s instructions), </p>
  
  <p>But instead of clicking a button to close the popup, I would like to know how to modify the javascript so that it closes when you click anywhere outside of it.</p>