点击空白处关闭弹出层#box{width:300px;height:200px;border:1px solid #000;display:none;}.btn{color:red;}

$(function(){

$(".btn").click(function(event){

        var e=window.event||event;

        if(e.stopPropagation){

            e.stopPropagation();

        }else{

            e.cancelBubble=true;

        }

        $("#box").show();

});

$("#box").click(function(event){

     var e=window.event||event;

    if(e.stopPropagation){

        e.stopPropagation();

    }else{

        e.cancelBubble=true;

    }

});

document.onclick=function(){

    $("#box").hide();

};

})点击此处打开弹出层
点击空白处关闭弹出层

原理就是  对文档流body 做隐藏  然后去除事件冒泡  特殊展示