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，達到關閉效果