【前端】-全屏遮罩_html/css_WEB-ITnose

前端开发中，很多时候一个弹出层的显示都会伴随着一个遮罩层的显示。

 1  "http://www.w3.org/TR/html4/loose.dtd"> 3  4               5 6          8      9     10     11         24         25     26 

以上代码是一个遮罩层的简易演示代码。

在页面没有滚动条的情况下都能满足要求。但是当页面有滚动条时，你就会发现，以上的处理方式并不能满足全屏遮罩。

下面就通过结合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"; 

这样处理，不管页面是否包含滚动条，都能实现全屏遮罩了。