你的位置:首页 > 网页设计

[网页设计]可以防止滚动条影响的全屏遮罩效果


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

<!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>

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

<!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>

在上面的代码中,当点击按钮弹出遮罩层的时候设置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/