Question

我做了模态窗口。单击X按钮关闭。但是现在我想关闭它，如果用户点击区域外的模态。

    $("a[href='#modal']").click(function(e) {
        e.preventDefault();
        $("body").addClass("noscroll");
        $(".modal").addClass("is-active");
        $(".modal_overlay").addClass("is-active");
    });
    $(".modal .close").click(function(e) {
        e.preventDefault();
        if($(".modal").hasClass("is-active")) {
            $("body").removeClass("noscroll");
            $(".modal").removeClass("is-active");
            $(".modal_overlay").removeClass("is-active");
        }
    });

Answer 1

这是一个解决方案：

function close(){
    $("body").addClass("noscroll");
    $(".modal").addClass("is-active");
    $(".modal_overlay").addClass("is-active");
}
$("a[href='#modal']").click(function(e) {
    e.preventDefault();
    close();
});
$(".modal .close").click(function(e) {
    e.preventDefault();
    if($(".modal").hasClass("is-active")) {
        close();
    }
});
$(window).click(function(e) {
       close();
       return false;
});
$(".modal").click(function(){
    return false; // prevents a click in dialog to close the modal
});

它只是处理窗口上的点击以关闭模态，同时在模态中拦截它们以防止它们击中前一个事件处理程序。

如何在外部点击关闭自己的模态？

1 个答案: