一个简单的不能再简单的弹出层代码.....
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>