Maison > Article > interface Web > 可以防止滚动条影响的全屏遮罩效果_html/css_WEB-ITnose
可以防止滚动条影响的全屏遮罩效果_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:29:211763parcourir
可以防止滚动条影响的全屏遮罩效果:
遮罩效果当前在很多应用中都有使用，当然也比较简单，无非是在需要的时候出现一个具有透明效果的全屏元素，但是有一种情况需要特别注意一下，那就是页面出现滚动条的时候，这个时候如不进行一下处理，遮罩层效果的表现可能不伦不类。
代码如下:
<!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/
Déclaration：
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
Article précédent：Bootstrap入门笔记之（零）Bootstrap简介_html/css_WEB-ITnoseArticle suivant：css让a元素位于li元素正中_html/css_WEB-ITnose