オーバーレイをクリックするとモーダルを閉じる方法

Question

私のコードがうまくいかない理由が分かりません。助けていただければ幸いです。オーバーレイまたは閉じるボタンをクリックするとオーバーレイが閉じる。

<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

.closeクリックイベントと同時にcallback-form.promoが発砲します。他の発射の場合はstopPropagation()を使用してください。

以下を試してください。

$(".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

は、だから、あなたはjQueryの.callPromo、探しているものと一致しない提供してきましたが、おそらくこれは自分の活性化因子であり、あなたがきていない、あなたのHTMLのように見えますそれを含む？また、最初のクリックイベントにネストされた2つの追加のクリックイベントもあります。これは必須ではなく、問題を引き起こしている可能性があります。 3つのクリックイベントをすべて同じスコープに入れてみてください。