單擊頁面任何地方關閉隱藏層的一種新的實現方法，有需要得朋友可以參考對比一下，可以自己在此基礎上擴展相關功能。（也可以在框架頁中綁定單擊事件，自己加一下即可。） ...
單擊頁面任何地方關閉隱藏層的一種新的實現方法，有需要得朋友可以參考對比一下，可以自己在此基礎上擴展相關功能。（也可以在框架頁中綁定單擊事件，自己加一下即可。）
<!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>
