隐藏弹窗的三种方法

隐藏弹窗.js

// 1.
function unShowPopup() {
    $(document).on('click', function(ev) {
        var $target = $(ev.target);
        // 当查找到顶部时还找不到指定的类名，则循环结束
        while ($target.length > 0) {
            // 当找到了指定类名时，则跳出函数，即不隐藏拥有该类名的元素
            if ($target.hasClass('dataform')) {
                console.log(1);
                return;
            }
            // 向目标的父级查找是否有指定的类名
            $target = $target.parent();
            console.log($target);
        }
        $('.dataform').hide();
    })
}

// 2.
$(document).bind('click',function(){ 
    $('#test').css('display','none'); 
}); 

$('#test').bind('click',function(e){ 
    e.stopPropagation(); 
}); 

// 3.利用jquery的方法 $().has()、 $().is()
// $().has() 返回jQuery对象
// $().is() 返回布尔值
$(document).click(function(e){
    // 设置目标区域
    var $popUp = $('.dataform');
    // 判断点击事件发生在区域外的条件是：
    // 1. 点击事件的对象不是目标区域本身,用is(e.target)
    // 2. 事件对象同时也不是目标区域的子元素，用has(e.target)
    if(!$popUp.is(e.target) && $popUp.has(e.target).length === 0){
        $popUp.hide();
    }
});