Home > Article > Web Front-end > 【前端】-全屏遮罩_html/css_WEB-ITnose
【前端】-全屏遮罩_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:18:251154browse
前端开发中，很多时候一个弹出层的显示都会伴随着一个遮罩层的显示。
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";<br /> floatBg.style.height = document.body.scrollHeight + "px"; 这样处理，不管页面是否包含滚动条，都能实现全屏遮罩了。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：随意字数文字垂直居中对齐_html/css_WEB-ITnoseNext article：简单的转盘抽奖--CSS动画优化_html/css_WEB-ITnose