title: jQuery - Closing modal pop-up by clicking outside of it not working
body: <p>I'm trying to close a pop-up when clicking outside of it.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="open"data-modal="modal1"&gt;Button&lt;/span&gt;
  
  &lt;div class="modal" id="modal1"&gt;
  
      &lt;!--modal content--&gt;
      &lt;div class="modal-content"&gt;
  
          &lt;!--close button--&gt;
          &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
  
          &lt;!--content--&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready( function() {
  
      //open pop-up when span is clicked
      $(".open").on("click", function() {
          var modalId = $(this).data("modal");
          var $modal = $("#" + modalId);
          $modal.show();
      });
  
      //close pop-up when close button is clicked
      $(".close").on("click", function() {
          $(this).closest(".modal").hide();
      });
  
  
  
      $("body").click(function(){
          $(".modal").hide();
      });
  
      // Prevent events from getting pass .popup
      $(".modal-content").click(function(e){
         e.stopPropagation();
      });
  
  });
  </code></pre>
  
  <p>At the bottom of that code block, I have a click function on the body that hides the modal, but if <code>modal-content</code> is clicked, then <code>e.stopPropagation();</code> is fired. </p>
  
  <p>However, when I click the button to open the pop-up, it doesn't open because of <code>$("body").click(function(){}</code>.</p>
  
  <p>Is there a way I can wrap <code>$("body").click(function(){}</code> in something like:</p>
  
  <pre><code>if($('.modal').show == true{ ... });
  </code></pre>