jQuery - 点击弹出框外部关闭弹出框不起作用

Question

当我在弹出框外面点击时，我想关闭它。

HTML

<span class="open"data-modal="modal1">Button</span>

<div class="modal" id="modal1">

    <!--modal content-->
    <div class="modal-content">

        <!--close button-->
        <span class="close">&times;</span>

        <!--content-->

    </div>
</div>

JS

$(document).ready( function() {

    //open pop-up when span is clicked
    $(".open").on("click", function() {
        var modalId = $(this).data("modal");
        var $modal = $("#" + modalId);
        $modal.show();
    });

    //close pop-up when close button is clicked
    $(".close").on("click", function() {
        $(this).closest(".modal").hide();
    });



    $("body").click(function(){
        $(".modal").hide();
    });

    // Prevent events from getting pass .popup
    $(".modal-content").click(function(e){
       e.stopPropagation();
    });

});

在代码块底部，我有一个点击函数来隐藏模态框，但如果点击了“modal-content”，那么就会触发“e.stopPropagation();”。

然而，当我点击打开弹出窗口的按钮时，它不会打开，因为$("body").click(function(){}。

是否有一种方式可以像这样包装$("body").click(function(){})：

if($('.modal').show == true{ ... });

- rpivovar

Answer 1

是的，你可以像这样做：

$("body").click(function() {
   if ($(".modal").is(":visible")) {
       $(".modal").hide();
   }
});

- Maarten van Tjonger

Answer 2

您需要做的就是重复之前所做的，即在单击“打开”按钮时停止传播：

//open pop-up when span is clicked
$(".open").on("click", function(e) { //with event now
    e.stopPropagation(); //stopping propagation here
    var modalId = $(this).data("modal");
    var $modal = $("#" + modalId);
    $modal.show();
});

这样就不会在 body 的点击处理程序中调用 hide()。

- Isac

---

哇，这就做到了。这是否使得 $(".modal-content").click(function(e){ e.stopPropagation(); }); 成为多余的了？ - rpivovar

还是那部分仍然必要吗？ - rpivovar

@coffeebot 不，你仍然需要那个，否则当你在模态框内点击时，它会关闭。 - Isac

抱歉，那是一个愚蠢的问题。 - rpivovar

是的，我刚刚弄明白了。谢谢。 - rpivovar

你可以通过测试事件目标是否是模态框的子元素来将两者结合起来。如果是，则可以提前返回并且不隐藏。 - Kevin B

Answer 3

使用Bootstrap 4，您可以通过执行以下操作在单击外部时关闭模态框。

 $('.modal').click(function (e) {
    $('.modal').modal('toggle');
 });

- Zoren Konte