Блог

Я не могу понять, почему мой код не работает, я был бы признателен, если бы вы мне помогли, мне нужно, чтобы при нажатии на кнопку overlay или close наложение было закрыто.

 <div class="callback-form promo">
            <form name='promoform' id="promoform">
                <span class="close-btn close">amp;#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");
            }
        });
    });
  

Ваше .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">amp;#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>  

Похоже, что предоставленный вами HTML-код не соответствует тому, что ищет jQuery, .callPromo но, возможно, это просто ваш активатор, и вы его не включили? Также у вас есть два дополнительных события щелчка, вложенных в ваше первоначальное событие щелчка. Это не обязательно и может быть причиной вашей проблемы. Попробуйте поместить все три события щелчка в одну и ту же область.