Wie man Modal schließen kann, wenn man draussen klickt

Question

Jun 01, 2016, 06:00 PM

Wie man Modal schließen kann, wenn man draussen klickt

Ich habe dieses JavaScript unten verwendet:

$('body').click(function() {
  if (!$(this.target).is('#popUpForm')) {
    $(".modalDialog").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="openModal" class="modalDialog">
    <div class="modalClose">
      <a href="#close" title="Close" class="close-circle" style="color:white; text-decoration:none; font-size:14px;"></a>
      <div id="signup-header">
        <h4>Request a brochure, with a free demo</h4>
        <h5>Please Fill in the form below: </h5>
      </div>

      <form id="popUpForm" class="tryMeForm" name="" onsubmit="return formCheck(this);" method="post" action="">
        <div class="InputGroup">
          <input type="text" name="name" id="name" value="" placeholder="First Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="lastname" id="lastname" value="" placeholder="Last Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Email" id="Email" value="" placeholder="Email Address*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Phone" id="Phone" value="" placeholder="Phone Number*" />
        </div>
        <div class="InputGroup">
          <textarea name="message" id="message" class="" placeholder="How we can help?"></textarea>
        </div>
        <div class="submit">
          <input class="button_submit1 button-primary button1" type="submit" value="Submit" />
        </div>

      </form>
    </div>
  </div>
</body>

Dadurch kann ich das Modal schließen, wenn ich außerhalb des Modals klicke. Es wird jedoch auch dann geschlossen, wenn ich ebenfalls hineinklicke. Wie kann ich es so einstellen, dass es nur außen und innen geschlossen wird, aber nicht, dass die Benutzer ihre Daten noch eingeben können?