<html> <head> <title> mask 遮罩效果 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{font:12px normal Arial,宋体;} #mask{ position:absolute;top:0;left:0; /* 位置 */ background:#ccc;width:100%;height:100%;z-index: 99998; /* 布局 */ filter:Alpha(Opacity=70); /* 透明度设置, for IE 。数值越高透明度越低 */ opacity:0.7; /* 透明度设置,for Firefox,Oprea等 */ } #pop{ position:absolute; /* 把absolute改成 fixed，还能看到这个pop，在firefox，Opera等浏览器里面，页面在滚动时也居中。 */ top:50%;left:50%;z-index:100;margin:-100px 0 0 -200px;/* 注意margin里面的数值和 pop宽高的数值关系。 */ width:400px;height:200px;background:#fff;border:1px solid red;z-index: 99999; } #pop h3{background:green;color:#fff;margin:0;padding:3px;font-size:14px;} #pop p{padding:3px 5px;} </style> </head> <body> <script type="text/javascript"> //这个js只是用来显示一定行数的内容。 for(var i=0;i<90;i++){ document.write(i+".页面内容 here<br />") } </script> Web标准化 <a href="http://www.div-css.com">www.div-css.com</a> <!-- 用来做遮挡效果的div： --> <div id="mask"></div> <!-- 弹出信息： --> <div id="pop"> <h3>这里是一个pop panel：</h3> <p> 可以用来调用ajax，做页面设置，<br /><br /> 也可以用来显示页面的一些提示信息。 </p> </div> <!-- 通过脚本，设置遮罩div和页面内容齐高,齐宽： --> <script type="text/javascript"> window.onload=function(){ document.getElementById('mask').style.height=document.body.scrollHeight; document.getElementById('mask').style.width=document.body.scrollWidth; } </script> </body> </html>
