可以防止滚动条影响的全屏遮罩效果_html/css

可以防止滚动条影响的全屏遮罩效果_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:29:21

Original

1780 people have browsed it

可以防止滚动条影响的全屏遮罩效果:
遮罩效果当前在很多应用中都有使用，当然也比较简单，无非是在需要的时候出现一个具有透明效果的全屏元素，但是有一种情况需要特别注意一下，那就是页面出现滚动条的时候，这个时候如不进行一下处理，遮罩层效果的表现可能不伦不类。
代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> *{   margin:0px;   padding:0px; } .zhezhao{   width:100%;   height:100%;   background-color:#000;   filter:alpha(opacity=50);   -moz-opacity:0.5;   opacity:0.5;   position:absolute;   left:0px;   top:0px;   display:none;   z-index:1000; } .login{   width:280px;   height:180px;   position:absolute;   top:200px;   left:50%;   background-color:#000;   margin-left:-140px;   display:none;   z-index:1500;  text-align:right; } .content{   margin-top:50px;   color:red;   line-height:200px;   height:200px;   text-align:center; } </style> <script type="text/javascript"> window.onload=function(){   var zhezhao=document.getElementById("zhezhao");   var login=document.getElementById("login");   var bt=document.getElementById("bt");   var btclose=document.getElementById("btclose");      bt.onclick=function(){     zhezhao.style.display="block";     login.style.display="block";   }   btclose.onclick=function(){     zhezhao.style.display="none";     login.style.display="none";    } } </script> </head> <body style="height:1000px;">   <div class="zhezhao" id="zhezhao"></div>   <div class="login" id="login"><input type="button" id="btclose" value="点击关闭"/></div>    <div class="content">蚂蚁部落欢迎您，<input type="button" value="查看效果" id="bt"/></div> </body> </html>

Copy after login

上面的代码中，点击按钮可以弹出遮罩层效果，但是向下拖动滚动条，则会发现下面的部分并没有遮罩，那么此效果也就失败了，代码修改如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> *{   margin:0px;   padding:0px; }html{height:100%}.zhezhao{   width:100%;   height:100%;   background-color:#000;   filter:alpha(opacity=50);   -moz-opacity:0.5;   opacity:0.5;   position:absolute;   left:0px;   top:0px;   display:none;   z-index:1000; } .login{   width:280px;   height:180px;   position:absolute;   top:200px;   left:50%;   background-color:#000;   margin-left:-140px;   display:none;   z-index:1500;  text-align:right; } .content{   margin-top:50px;   color:red;   line-height:200px;   height:200px;   text-align:center; } #middle{  width:30px;  height:1000px;  margin:0px auto;  background:red;}</style> <script type="text/javascript"> window.onload=function(){   var zhezhao=document.getElementById("zhezhao");   var login=document.getElementById("login");   var bt=document.getElementById("bt");   var btclose=document.getElementById("btclose");      bt.onclick=function(){     zhezhao.style.display="block";     login.style.display="block";    document.body.style.height="100%";    document.body.style.overflow="hidden";  }   btclose.onclick=function(){     zhezhao.style.display="none";     login.style.display="none";      document.body.style.height="";    document.body.style.overflow="";  } } </script> </head> <body>   <div class="zhezhao" id="zhezhao"></div>   <div class="login" id="login"><input type="button" id="btclose" value="点击关闭"/></div>    <div class="content">蚂蚁部落欢迎您，<input type="button" value="查看效果" id="bt"/></div>   <div id="middle"></div></body> </html>

Copy after login

在上面的代码中，当点击按钮弹出遮罩层的时候设置body的高度为100%，设置值为100%可以使body的高度和浏览器客户区的高度相同，然后设置overflow属性值为hidden，这样的话超出的部分就会被隐藏，于是弹出遮罩层的话，也就不会出现滚动条了，点击关闭遮罩层的时候，再将一切恢复原状。需要特别注意的是css中添加了如下代码: