title: How to make modal close on click outside
body: <p>I have used this JavaScript below:</p>
  
  <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>$('body').click(function() {
    if (!$(this.target).is('#popUpForm')) {
      $(".modalDialog").hide();
    }
  });</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;body&gt;
    &lt;div id="openModal" class="modalDialog"&gt;
      &lt;div class="modalClose"&gt;
        &lt;a href="#close" title="Close" class="close-circle" style="color:white; text-decoration:none; font-size:14px;"&gt;&lt;/a&gt;
        &lt;div id="signup-header"&gt;
          &lt;h4&gt;Request a brochure, with a free demo&lt;/h4&gt;
          &lt;h5&gt;Please Fill in the form below: &lt;/h5&gt;
        &lt;/div&gt;
  
        &lt;form id="popUpForm" class="tryMeForm" name="" onsubmit="return formCheck(this);" method="post" action=""&gt;
          &lt;div class="InputGroup"&gt;
            &lt;input type="text" name="name" id="name" value="" placeholder="First Name*" /&gt;
          &lt;/div&gt;
          &lt;div class="InputGroup"&gt;
            &lt;input type="text" name="lastname" id="lastname" value="" placeholder="Last Name*" /&gt;
          &lt;/div&gt;
          &lt;div class="InputGroup"&gt;
            &lt;input type="text" name="Email" id="Email" value="" placeholder="Email Address*" /&gt;
          &lt;/div&gt;
          &lt;div class="InputGroup"&gt;
            &lt;input type="text" name="Phone" id="Phone" value="" placeholder="Phone Number*" /&gt;
          &lt;/div&gt;
          &lt;div class="InputGroup"&gt;
            &lt;textarea name="message" id="message" class="" placeholder="How we can help?"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div class="submit"&gt;
            &lt;input class="button_submit1 button-primary button1" type="submit" value="Submit" /&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This allows me to close the modal when clicking outside of it. However, it closes even when I click inside as well. How can I make it close only on outside and the close button, but not inside, so the users can still enter their details?</p>