javascript - 如果单击叠加层如何关闭模式

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>