纯css实现灰色背景层,兼容ie56789&ff&opera&Chrome&Safari
纯css实现灰色背景层,兼容ie56789&ff&opera&Chrome&Safari.
基本上通吃浏览器了.实测中兼容ie6,7,ff,其他浏览器没试.
特性:
1、纯CSS实现，支持 IE5.5 6 7 FF Opera Chrome Safari。
2、支持<!DOCTYPE文件头声明。（拉动滚动条仍然居中）。
3、自动遮住select(隐藏)、拉动滚动条仍然居中。
看效果图:
看代码:
<!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=utf-8" /><title>原创：风干的果子，Q群号：29032448 web_前端开发</title><style type="text/css"><!--html,body {height:100%; margin:0px; font-size:12px;}.mydiv {background-color: #FFCC66;border: 1px solid #f00;text-align: center;line-height: 40px;font-size: 12px;font-weight: bold;z-index:999;width: 300px;height: 120px;left:50%;/*FF IE7*/top:50%;/*FF IE7*/margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/margin-top:0px;position:fixed!important;/*FF IE7*/position:absolute;/*IE6*/_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}.bg,.popIframe {background-color: #666; display:none;width: 100%;height: 100%;left:0;top:0;/*FF IE7*/filter:alpha(opacity=80);/*IE*/opacity:0.8;/*FF*/z-index:1;position:fixed!important;/*FF IE7*/position:absolute;/*IE6*/_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/} .popIframe {filter:alpha(opacity=0);/*IE*/opacity:0;/*FF*/}--> </style><script language="javascript" type="text/javascript">function showDiv(){document.getElementById('popDiv').style.display='block';document.getElementById('popIframe').style.display='block';document.getElementById('bg').style.display='block';}function closeDiv(){document.getElementById('popDiv').style.display='none';document.getElementById('bg').style.display='none';document.getElementById('popIframe').style.display='none';}</script></head><body><div id="popDiv" style="display:none;">网页设计大本营欢迎你！<br/>Q群号:29032448<br/><a href="javascript:closeDiv()">关闭窗口</a></div><div id="bg" style="display:none;"></div><div style="height:1400px; "><p>春江花月夜 唐 张若虚 春江潮水连海平，海上明月共潮生。<br /> 滟滟随波千万里，何处春江无月明？<br /> 江流宛转绕芳甸，月照花林皆似霰。<br /> 空里流霜不觉飞，汀上白沙看不见。<br /> 江天一色无纤尘，皎皎空中孤月轮。<br /> 江畔何人初见月？江月何年初照人？<br /> 人生代代无穷已，江月年年只相似。<br /> 不知江月待何人，但见长江送流水。<br /> 白云一片去悠悠，青枫浦上不胜愁。<br /> 谁家今夜扁舟子？何处相思明月楼？<br /> 可怜楼上月徘徊，应照离人妆镜台。<br /> 玉户帘中卷不去，捣衣砧上拂还来。<br /> 此时相望不相闻，愿逐月华流照君。<br /> 鸿雁长飞光不度，鱼龙潜跃水成文。<br /> 昨夜闲潭梦落花，可怜春半不还家。<br /> 江水流春去欲尽，江潭落月复 <select name="select4" id="select4"> <option>333</option> <option>dddddd</option> <option>qqqqqq</option> </select> 西斜。<br /> 斜月沉沉藏海雾，碣石潇湘无限路。<br /> 不知乘月几人归？落花摇情满江树。 </p><p><br /> </p><div style="height:100px; line-height:100px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a>2<select name="select" id="select"><option>333</option><option>dddddd</option><option>qqqqqq</option></select></div><p>春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好<select name="select3" id="select3"> <option>333</option> <option>dddddd</option> <option>qqqqqq</option></select>像与潮水一起涌出来。<br /> 月光照耀着春江，随着波浪闪耀千万里，什么地方的春江没有明亮的月光。<br /> 江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠的闪烁。<br /> 月光象白霜一样从空中流下，感觉不到它的飞翔，它照得江畔的白沙看不见。<br /> 江水、天空成一色，没有些微灰尘，只有明亮的一轮孤.收集整理:<a href="http://www.k686.com">k686绿色软件</a> <select name="select2" id="select2"> <option>333</option> <option>dddddd</option> <option>qqqqqq</option> </select> </div><iframe id='popIframe' class='popIframe' frameborder='0' ></iframe></body></html>看掌声.呵呵.转载的,这个比较强大,浏览器支持很好.
很多人说放弃ie6,怎么说呢,ie6的市场份额还是绝对不允许忽略的.看图:
看了这图,还打算放弃ie6的话,那,除非你是大头,像Google那样的大头. 1 楼 zachary.guo 2010-05-13 又来拍砖了，哈哈，开个玩笑咯～～～
注意你的网页，有滚动条，对不？你的灰色层是想挡住后面的页面，使其不能操作，对不？可是我仍然可以操作属于 document.body 的滚动条。能否把页面的滚动条也给覆盖？