有时候我们想让div遮挡整个页面,页面可能出现滚动条,也可能不出现,页面有可能是html或者xhtml,这个方法可以通杀这些情况,而且根据你的要求,是盖整个页面,或者可视部分,在兼容性方面支持ie6-8、ff3.0-3.6、chrome、safari……浏览器等。
代码:复制】 【运行
<!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> <title>DIV弹出层</title> <meta charset="gbk" /> <style> div{ position:absolute; top:0; left:0; background:#ccc; } </style> </head> <body> <div id="test"></div> <input onclick="test1()" type="button" value="盖住整个页面"/> <input onclick="test1(1)" type="button" value="盖住可视的部分"/> </body> </html> <script> function test1(f){ var d = document.getElementById('test'),wh = getWH(f); d.style.cssText +=";width:"+wh.w+'px;height:'+wh.h+'px' } var getWH = function (){ var d = document,doc = d[d.compatMode == "CSS1Compat"?'documentElement':'body']; return function(f){ return { w:doc[(f?'client':'scroll')+'Width'], h:f?doc.clientHeight:Math.max(doc.clientHeight,doc.scrollHeight) } } }() </script>