jQuery - 通过单击外部关闭模式弹出窗口不起作用答案

【问题标题】：jQuery - Closing modal pop-up by clicking outside of it not workingjQuery - 通过单击外部关闭模式弹出窗口不起作用
【发布时间】：2019-08-08 10:35:17
【问题描述】：

我正在尝试在单击外部时关闭弹出窗口。

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>

$(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{ ... });

【问题讨论】：

标签： javascript jquery

【解决方案1】：

是的，你可以这样做：

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

【讨论】：

【解决方案2】：

所有你需要做的和你之前做的一样，这是当你点击open按钮时停止传播：

//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()。

【讨论】：

哇，做到了。这会使$(".modal-content").click(function(e){ e.stopPropagation(); }); 变得多余吗？
或者那部分还有必要吗？
@coffeebot 不，您仍然需要那个，否则当您在模式内单击时它会关闭
对不起，这是一个愚蠢的问题
您可以通过测试事件目标是否是模态的子级来将两者结合起来。如果是，那你可以早点回来，不躲。

【解决方案3】：

使用 bootstrap 4，您可以在点击外部时关闭模态框。

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

【讨论】：