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

Answer 1

是的，你可以这样做：

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

Answer 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();
});

这样它就不会调用hide()单击body处理程序。