js點擊出現場層層外點擊層消失的代碼

2019-11-21 01:37:54

字體：大中小

來源：轉載

供稿：網友

<!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">     <head>         <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />         <title>點擊一個連接顯示層~點擊其他區域隱藏 練習 by 武林網</title>         <style type="text/css">             #myDiv{                 border:1px solid #000000;                 width:200px;                 height:100px;                 background:#cccccc;             }         </style>         <script language="JavaScript" type="text/javascript">         function addListener(element,e,fn){      if(element.addEventListener){     element.addEventListener(e,fn,false);      } else {      element.attachEvent("on" + e,fn);      }     }         addListener(document,"click",function(evt){                 var evt = window.event?window.event:evt,target=evt.srcElement||evt.target;                 if(target.id == "showDiv"){                     document.getElementById("myDiv").style.display = "";                     return;                 }else{                     while(target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html"){                         target = target.parentNode;                             }                     if(target.nodeName.toLowerCase() == "html"){                         document.getElementById("myDiv").style.display = "none";                     }                                                               }                     })         </script>     </head>     <body>         <div   class="iwvjtn8m0"   id="myDiv" style="display:none;"><a href="http://m.survivalescaperooms.com" target="_blank">武林網</a></div>         <input type="button" value="出來吧層" id="showDiv" />     </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：Javascript模擬scroll滾動效果腳本第1/2頁

下一篇：js怎樣實現下拉框改變，它旁邊的圖像也改變