实现思路:
涂盖层目的在占据整个屏幕并且加上透明度
完成这样的效果需要定位position:absolute;
opacity:0.5 FF 百分之50%的透明度
filter:alpha(opacity=50); IE 百分之50%透明度
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 5 <title>弹出层效果</title> 6 <style type="text/css"> 7 html,body{height:100%;overflow:hidden;} 8 body,div,h2{margin:0;padding:0;} 9 center{padding-top:10px;} 10 button{cursor:pointer;} 11 /*涂盖层*/ 12 #overlay{position:absolute;top:0;left:0;width:100%;height:100%; 13 background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;color:#fc0;} 14 15 #win{position:absolute;top:50%;left:50%; 16 width:400px;height:200px;background:#fff;border:2px solid #f90; 17 margin:-102px 0 0 -202px;display:none;} 18 19 h2{font-size:12px;text-align:right;background:#fc0;border-bottom:3px solid #f90;padding:5px;} 20 h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} 21 </style> 22 </head> 23 <body> 24 <div style="display:none" id="overlay">涂盖层</div> 25 <div style="display:none" id="win"> 26 <h2><span id="close">×</span></h2> 27 </div> 28 <center><button>弹出层</button></center> 29 <script type="text/javascript"> 30 //1:涂盖层目的在占据整个屏幕并且加上透明度 31 //完成这样的效果需要定位position:absolute; 32 //opacity:0.5 FF 百分之50%的透明度 33 //filter:alpha(opacity=50); IE 百分之50%透明度 34 window.onload = function(){ 35 var button = document.getElementsByTagName("button")[0]; 36 var overlay = document.getElementById("overlay"); 37 var win = document.getElementById("win"); 38 var close = document.getElementById("close"); 39 button.onclick = function(){ 40 overlay.style.display = "block"; 41 win.style.display = "block"; 42 }; 43 44 close.onclick = function(){ 45 overlay.style.display = "none"; 46 win.style.display = "none"; 47 } 48 49 50 51 }; 52 53 </script> 54 </body> 55 </html>