【前端】-全屏遮罩_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:18:251188검색
前端开发中，很多时候一个弹出层的显示都会伴随着一个遮罩层的显示。
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"; 这样处理，不管页面是否包含滚动条，都能实现全屏遮罩了。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.