点击空白处隐藏案例 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #hui{
            width:100%;
            height:100%;
            position:fixed;
            left:0;
            top:0;
            opacity:0.4; /*半透明*/
            background-color: gray;
            display:none;
        }
        #kong{
            width:200px;
            height:200px;
            background-color: #fff;
            margin:100px auto;
            display:none;
        }
        body{
            height:3000px;
        }
    </style>
</head>
<body>
    <a href="javascript:;" id="zhuce">注册</a>
    <a href="javascript:;">登陆</a>
    <div id="hui">
        <div id="kong"></div>
    </div>
</body>
</html>
<script>
    //点击注册时，hui的和kong的都会显示，滚动条隐藏； 点击kong的，hui的和kong的会隐藏,滚动条会显示
    var zhuce=document.getElementById("zhuce");
    var hui=document.getElementById("hui");
    var kong=document.getElementById("kong");
    zhuce.onclick=function (event) {
        var event=event||window.event;
        var targetId=event.target? event.target.id : event.srcElement.id;  //首先判断当前对象（兼容性写法),返回的是点击的某个对象的id名字
        if(targetId=="zhuce")
        {
            hui.style.display="block";
            kong.style.display="block";
            document.body.style.overflow="hidden"; //滚动条不显示

            //取消冒泡，因为点击注册时，也同时是在点击document
            if(event && event.stopPropagation)
            {
                event.stopPropagation();
            }
            else{
                event.cancelBubble=true;
            }
        }

    }
    kong.onclick=function (event) {
        var event=event||window.event;
        var targetId=event.target? event.target.id : event.srcElement.id;
        if(targetId=="kong")
        {
            hui.style.display="none";
            kong.style.display="none";
            document.body.style.overflow="visible";
        }
    }

</script>

　　

posted @ 2019-07-26 21:00  shanlu  阅读(111)  评论(0)    收藏  举报