一個簡單的不能再簡單的彈出層代碼.....
View Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 #login 7 { 8 display:none; 9 border:1em solid #3366FF; 10 height:30%; 11 width:50%; 12 position:absolute;/*讓節點脫離文檔流,我的理解就是,從頁面上浮出來,不再按照文檔其它內容布局*/ 13 top:24%;/*節點脫離了文檔流,如果設置位置需要用top和left,right,bottom定位*/ 14 left:24%; 15 z-index:2;/*個人理解為層級關系,由於這個節點要在頂部顯示,所以這個值比其余節點的都大*/ 16 background: white; 17 } 18 #over 19 { 20 width: 100%; 21 height: 100%; 22 opacity:0.8;/*設置背景色透明度,1為完全不透明,IE需要使用filter:alpha(opacity=80);*/ 23 filter:alpha(opacity=80); 24 display: none; 25 position:absolute; 26 top:0; 27 left:0; 28 z-index:1; 29 background: silver; 30 } 31 </style> 32 </head> 33 <body> 34 <a href="javascript:show()">彈出</a> 35 <div id="login"> 36 <a href="javascript:hide()">關閉</a> 37 <div>這里是關閉彈窗的內容</div> 38 </div> 39 <div id="over"></div> 40 </body> 41 </html> 42 43 <script type="text/javascript"> 44 var login = document.getElementById('login'); 45 var over = document.getElementById('over'); 46 function show() 47 { 48 login.style.display = "block"; 49 over.style.display = "block"; 50 } 51 function hide() 52 { 53 login.style.display = "none"; 54 over.style.display = "none"; 55 } 56 </script>