单击页面任何地方关闭隐藏层的一种新的实现方法，有需要得朋友可以参考对比一下，可以自己在此基础上扩展相关功能。（也可以在框架页中绑定单击事件，自己加一下即可。）
<!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>
时间： 2024-10-27 05:14:06