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

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

 *{   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; }  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";    } } 
   
    
蚂蚁部落欢迎您，
  

登录后复制

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

 *{   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;} 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="";  } } 
   
    
蚂蚁部落欢迎您，
   
 

登录后复制

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

html{height:100%}

登录后复制

具体相关内容可以参阅设置html,body高度100%的作用一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14507

立即学习“前端免费学习笔记（深入）”；

更多内容可以参阅:http://www.softwhy.com/divcss/