Maison > interface Web > tutoriel HTML > 可以防止滚动条影响的全屏遮罩效果_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:29:21
original
1779 Les gens l'ont consulté

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

<!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>
Copier après la connexion

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

<!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>
Copier après la connexion

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

html{height:100%}
Copier après la connexion

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

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

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal