jsd出的遮罩层，如何能遮住全屏？

工具：电脑；浏览器；ultraedit软件；

*** 作步骤如下：

1、打开UE编辑器，新建一个空白的html文件和css文件；

2、在html文件中输入以下html代码；

3、在css文件中输入以下css代码；

4、编辑完成之后，选择格式为UTF8-无 BOM模式，保存文件；

5、在浏览器中打开此html文件，可以看到最终想要实现的遮住全屏效果。

解决遮罩层不能覆盖整个页面问题 原创

2017-07-18 18:15:51

3点赞

T_world

码龄8年

关注

最近的项目需要一个点击，然后d出遮罩层的效果，于是在页面中加了一个遮罩层（设定高度为100%）。

但是今天偶然发现，遮罩层只能遮住一屏的高度，若页面比一屏高的话，只要向下滚就可以发现没有被遮住的部分。

查资料得知，出现这种现象的原因是虽然设置了遮罩层的高度为100%，但是js代码执行的时候自动获取的其实还是当前屏幕的高度，因此导致它只能遮住一屏的内容。那么解决的方案也就是获取屏幕高度和当前页面高度，选取较大的一个设置为遮罩层的高度即可。

修正的代码如下，亲测有效：

需要注意的是，在设置遮罩层的高度的时候后面一定要拼接上‘px’这个字符串，开始时我没有拼接，发现代码完全无效，纠结了很久……

打开CSDN，阅读体验更佳

css+js+html遮罩层实例,javascript实现遮罩层动态效果实例_eqzzzlibr...

js代码部分: window.οnlοad=function(){ window.οnscrοll=function(){ //动态设置遮罩层的宽高与屏幕可见宽高一致,实现被遮罩页面的全覆盖 document.getElementById("shade").style.width=document.body.clientWidth+"px"...

实现iframe中子页面的d框遮罩层遮盖父页面等整个页面

---