单击页面任何地方关闭隐藏层
Posted D:>_ 你好像很美味
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击页面任何地方关闭隐藏层相关的知识，希望对你有一定的参考价值。
单击页面任何地方关闭隐藏层的一种新的实现方法，有需要得朋友可以参考对比一下，可以自己在此基础上扩展相关功能。（也可以在框架页中绑定单击事件，自己加一下即可。）
<!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>
以上是关于单击页面任何地方关闭隐藏层的主要内容，如果未能解决你的问题，请参考以下文章