js实现页面遮罩层,并且阻止页面body滚动
2017-12-28 11:08
751 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV CSS遮罩层</title> <script language="javascript" type="text/javascript"> function showdiv() { document.getElementById("bg").style.display ="block"; document.getElementById("show").style.display ="block"; } function hidediv() { document.getElementById("bg").style.display ='none'; document.getElementById("show").style.display ='none'; } </script> <style type="text/css"> #bg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity=70); } #show { display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index: 1002; overflow: auto; } body { padding-top: 100px; } </style> </head> <body> <input id="btnshow" type="button" value="Show" onclick="showdiv();"/> <div id="bg"></div> <div id="show">测试 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/> </div> </body> </html>
发现当有滚动条时就出现问题了。
经过改动的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV CSS遮罩层</title> <script src="js/jquery-1.11.3.min.js"></script> <script language="javascript" type="text/javascript"> function showdiv() { document.getElementById("bg").style.display ="block"; document.getElementById("show").style.display ="block"; $('body').css("overflow", "hidden") } function hidediv() { document.getElementById("bg").style.display = 'none'; document.getElementById("show").style.display = 'none'; $('body').css("overflow", "auto") } </script> <style type="text/css"> #bg { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity=70); } #show { display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index: 1002; overflow: auto; } body { padding-top: 300px; } </style> </head> <body> <input id="btnshow" type="button" value="Show" onclick="showdiv();"/> <div id="bg"></div> <div id="show">测试 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
完美解决。
从上面的问题中我们总结出以上两条经验。
1、fixed的的作用是
overflow:hidden。才有效,如果页面有滚动条,fixed的意义是不存在的。这是fixed的bug
2、让一个层在body中全部占满有下面的方式
1、left:0;top:0;width:100%;height:100%;position:fixed 2、left:0;top:0;right:0;bottom:0;posioton:fixed;
相关文章推荐
- js实现页面遮罩层,并且阻止页面body滚动
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- JS弹出遮罩层后底部页面不滚动实现
- js页面滚动时层智能浮动定位实现
- jQuery阻止移动端遮罩层后页面滚动
- js 实现页面两边广告, 可关闭对联广告 随滚动条滚动 符合w3c标准
- js实现页面元素随着内容的滚动而滚动
- 用js+iframe形成页面的一种遮罩效果的具体实现
- [js]网页侧边随页面滚动广告效果实现
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)
- js页面滚动浮动层智能定位(jQuery)实现
- js 实现页面两边广告, 可关闭对联广告 随滚动条滚动 符合w3c标准
- js实现滚动条滚动到页面底部继续加载
- jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
- 实现弹出一个隐藏的div窗口,body页面变成灰色并且不可被编辑