jQuery实现点击弹出框外界面关闭弹框

通过jQuery的closest方法实现点击弹框以外的部分关闭弹框。

closest() 方法返回被选元素的第一个祖先元素。具体用法：https://www.runoob.com/jquery/traversing-closest.html

 

$(document).ready(function() {
            $("body").click(function(e) {
                if ($(e.target).closest("#touch,#miss").length == 0) { //length等于0执行
                    $("#miss").hide();
                    $("#phone").css("filter", "brightness(100%)");
                }
            });
            $("#touch").click(function() { //弹出框

                $("#miss").fadeIn("slow");
                $("#phone").css("filter", "brightness(50%)");

            })
        })

点击id为touch的button时，closest("#touch,#miss)，匹配到#touch本身，length为1，弹出弹框。弹出弹框后，点击弹框本身length为1，点击弹框外均为0，达到关闭效果