欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

【前端】-全屏遮罩 - MR.Huangjw

程序员文章站 2022-05-06 17:15:44
...
前端开发中,很多时候一个弹出层的显示都会伴随着一个遮罩层的显示。
 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";

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