1 doctype html public -//w3c//dtd html 4.01 transitional//en 2 http://www.w3.org/tr/html4/loose.dtd> 3 html xmlns=http://www.w3.org/1999/xhtml> 4 head> 5 meta http-equiv=content-type content=text/html; charset=utf-8 /> 6 title>全屏遮罩title> 8 head> 9 10 body>11 style>12 .float-bg {13 width: 100%;14 height: 100%;15 background-color: #000;16 opacity: .6;17 filter: alpha(opacity=60);18 position: absolute;19 left: 0;20 top: 0;21 z-index: 1100;22 }23 style>24 div class=float-bg id=float-bg> div>25 body>26 html>
以上代码是一个遮罩层的简易演示代码。
在页面没有滚动条的情况下都能满足要求。但是当页面有滚动条时，你就会发现，以上的处理方式并不能满足全屏遮罩。
下面就通过结合javascript的方式，实现页面包含滚动条时的全屏遮罩。
这里将会用到上一篇文章中的两个方法：scrollwidth，scrollheight。相关处理方式如下：
1 var floatbg = document.getelementbyid(float-bg);2 floatbg.style.width= document.body.scrollwidth + px;
floatbg.style.height = document.body.scrollheight + px;
这样处理，不管页面是否包含滚动条，都能实现全屏遮罩了。