如何关闭一个模态，如果你点击叠加

how to close a modal if you click on overlay

本文关键字：如果 叠加 模态 一个 何关闭      更新时间：2023-09-26

我不知道为什么我的代码不工作，我会很感激，如果你帮助我，我需要当你点击覆盖或关闭按钮，覆盖将关闭。

<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");
            }
        });
    });

您的.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>

所以它看起来像你提供的HTML不匹配什么jQuery正在寻找，.callPromo但也许这只是你的激活器，你还没有包括它?此外，在初始单击事件中还嵌套了两个额外的单击事件。这是不必要的，可能是什么导致你的问题。尝试将所有三个单击事件放在同一个作用域中。

相关文章：