【前端】-全屏遮罩_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

Jun 24, 2016 am 11:18 AM

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

 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