Wie man ein Modal schließt, wenn man auf Overlay klickt

Question

Ich kann nicht herausfinden, warum mein Code nicht funktioniert, würde ich schätzen, wenn Sie mir helfen, brauche ich, wenn Sie auf Overlay oder Schließen klicken, Overlay wird geschlossen .

<div class="callback-form promo"> 
      <form name='promoform' id="promoform"> 
       <span class="close-btn close">&#10006;</span> 
       <input type="text" name="name" placeholder="Имя" maxlength="30"> 
       <input type="tel" name="phone" placeholder="Телефон" maxlength="20"> 
       <input class="callback-submit" type="submit" value="Отправить" name="save" id="sendPromo" disabled> 
      </form> 
     </div> 

js:

$(".callPromo").click(function() { 
     $(".callback-form.promo").css("display", "block"); 
     $(".close").click(function() { 
      $(".callback-form.promo").css("display", "none"); 
     }); 
     $(".callback-form.promo").on("click", function(e) { 
      var clicked = $(e.target); 
      var x = $(".callback-form.promo #promoform"); 
      console.log(clicked); 
      if (clicked != x) { 
       $(".callback-form.promo").css("display", "none"); 
      } 
     }); 
    }); 

Answer 1

Ihre .close klicken Ereignis und callback-form.promo feuern in der gleichen Zeit. Verwenden Sie stopPropagation() für nicht feuern andere.

Versuchen Sie unten.

$(".callPromo").click(function() { 
 
     $(".callback-form.promo").css("display", "block"); 
 
}); 
 
$(".close").click(function(e) { 
 
    $(".callback-form.promo").css("display", "none"); 
 
    e.stopPropagation(); 
 
}); 
 
$("#promoform input").on("click", function(e) { 
 
    e.stopPropagation(); 
 
}) 
 
$(".callback-form.promo").on("click", function(e) { 
 
    e.stopPropagation(); 
 
    var clicked = $(e.target); 
 
    var x = $(".callback-form.promo #promoform"); 
 
    console.log(clicked) 
 
    if (clicked != x) { 
 
    $(".callback-form.promo").css("display", "none"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="callback-form promo" style="background:red;width:300px;height:300px"> 
 
      <form name='promoform' id="promoform"> 
 
       <span class="close-btn close">&#10006;</span> 
 
       <input type="text" name="name" placeholder="Имя" maxlength="30"> 
 
       <input type="tel" name="phone" placeholder="Телефон" maxlength="20"> 
 
       <input class="callback-submit" type="submit" value="Отправить" name="save" id="sendPromo" disabled> 
 
      </form> 
 
     </div>

Answer 2

So sieht es aus wie Ihre HTML Sie passt nicht zur Verfügung gestellt haben, was die jQuery sucht, .callPromo aber vielleicht ist dies Ihr Aktivator nur und du hast nicht eingeschlossen es? Außerdem sind zwei zusätzliche Klickereignisse in Ihrem anfänglichen Klickereignis verschachtelt. Dies ist nicht notwendig und kann das Problem verursachen. Versuchen Sie, alle drei Klickereignisse in den gleichen Bereich zu setzen.