首页 > 代码库 > 单击页面任何地方关闭隐藏层

单击页面任何地方关闭隐藏层

2024-08-18 07:46:45   224人阅读

单击页面任何地方关闭隐藏层的一种新的实现方法，有需要得朋友可以参考对比一下，可以自己在此基础上扩展相关功能。（也可以在框架页中绑定单击事件，自己加一下即可。）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单击页面任何地方关闭隐藏层</title>
<script type="text/javascript">

var document_click_hide_object=function(a,b){
    var a=document.getElementById(a);
    var b=document.getElementById(b);
    //单击a时显示b
    a.addEventListener("click",function(){
        b.style.left=a.offsetLeft + "px";
        b.style.top=a.offsetTop + a.clientHeight + "px";
        b.style.display="block";
        b.setAttribute("data-close","false");
        window.setTimeout(function() {
            b.setAttribute("data-close","true");
        }, 100);
    });
    b.addEventListener("click",function(){
        b.setAttribute("data-close","false");
        window.setTimeout(function() {
            b.setAttribute("data-close","true");
        }, 100);
    });
    document.addEventListener("click",function(){
        window.setTimeout(function() {
            if (b.getAttribute("data-close") == "true") {
                b.setAttribute("data-close","false");
                b.style.display="none";
            }
        }, 50);
    });
}

window.onload=function(){
    document_click_hide_object("a","b");
}
</script>
<style type="text/css">
#a {
    padding: 3px 10px;
    border: 1px solid #CCC;
    position: absolute;
    top: 50px;
    left: 100px;
    width: 50px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}
#b {
    padding: 3px 10px;
    border: 1px solid #CCC;
    position: absolute;
    padding:20px;
    display: none;
    background:#FFF;
}
</style>
</head>

<body>
<div id="a">显示</div>
<div id="b">我显示后你点击我我不会自动关闭，点击页面任何地方才会关闭噢，快试试看噢！</div>
</body>
</html>

 

单击页面任何地方关闭隐藏层


联系
我们