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

因此，您提供的HTML看起来与jQuery正在寻找的内容相匹配，.callPromo但是这可能仅仅是您的激活因素，而您还没有包含它？此外，您还有两个嵌入在初始点击事件中的额外点击事件。这不是必要的，可能是导致问题的原因。尝试将所有三个点击事件放在同一范围内。

如果单击叠加层，如何关闭模态

2 个答案: