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。

Answer 3

使用引导程序4，只需在外部单击即可关闭模式。

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

jQuery - 通过单击它外部关闭模式弹出窗口无法正常工作

3 个答案: