js实现页面遮罩层，并且阻止页面body滚动
<!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;
非常感谢下面博主的链接问题才得以解决，感谢互联网时代的分享精神。
http://www.cnblogs.com/kaisela/archive/2014/05/21/3740898.html
js实现页面遮罩层，并且阻止页面body滚动的更多相关文章
- 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理
实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色 ...
- Angularjs 实现页面遮罩层功能
实现效果: 1.loading指令: "use strict" /** * Created by yw on 2015/9/27. * user defined loading d ...
- H5页面遮罩弹框下层还能滚动的问题
在页面上显示一个遮罩层,这是非常常见的操作,在遮罩层上操作,下层也会默认跟随手指滚动 此处就是要在显示遮罩的时候禁止下层滚动. 首先设置一个全局变量 var canScroll=false; 页面初始 ...
- 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件
刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...
- 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件
/*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...
- Z遮罩层完全覆盖页面
不要使用absolute定位,用fixed就行.然后 background:rgba(0, 0, 0, 0.5); position:fixed; z-index: 100; left:0; righ ...
- js+html实现遮罩层效果（收藏哦）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...
- 做了一个js的拉动遮罩层，两个图片分别显示的效果
想做成车修好了和没修好的对比,所以需要两个图片.需要用到的知识点, 1.定位 2.mouse 的事件(代码中体现) 3.鼠标指针的移动距离算法 4.css中,cursor的应用 好了,废话不多说 ,直 ...
- JS弹出遮罩层
// create div var mask=document.createElement("div"); mask.id="mask"; mask.style ...
随机推荐
- 01 Zabbix采集数据方式
Zabbix采集数据方式 1. zabbix采集数据方式: 基于专用agent 被监控的设备上面安装agent软件,这个agent必须在设备上面有采集数据的权限 基于SNMP, net-snmp ...
- 洛谷 P4097 [HEOI2013]Segment 解题报告
P4097 [HEOI2013]Segment 题目描述 要求在平面直角坐标系下维护两个操作: 在平面上加入一条线段.记第 \(i\) 条被插入的线段的标号为 \(i\) 给定一个数 \(k\),询问 ...
- luogu1514 [NOIp2010]引水入城 (bfs+记忆化搜索)
我们先bfs一下看看是否能到最底下的所有点 如果不能的话,直接把不能到的那几个数一数就行了 如果能的话: 可以发现(并不可以)某格能到达的最底下的格子一定是一个连续的区间 (因为如果不连续的话,我们先 ...
- Some Interesting Problems（持续更新中）
这种题目详解,是“一日一测”与“一句话题解”栏目所无法覆盖的,可能是考试用题,也可能是OJ题目.常常非常经典,可以见微知著.故选其精华,小列如下. T1:fleet 给定一个序列,询问[L,R]间有多 ...
- module模块和包（十七）
在前面的几个章节中我们脚本上是用 python 解释器来编程,如果你从 Python 解释器退出再进入,那么你定义的所有的方法和变量就都消失了. 为此 Python 提供了一个办法,把这些定义存放在文 ...
- 搭建一个简单的node.js服务器
第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...
- php 防止sql注入的简单方法
您可以使用PHP的功能,如函数stripslashes()和addslashes(),mysql_real_escape_string()等,使安全的SQL查询. 以下是安全的SQL语句,使用PHP ...
- jsp中的request.getContextPath()
jsp中的request.getContextPath() <%=request.getContextPath()%>是为了解决相对路径的问题,可返回站点的根路径. 但不用也可以吧,比 ...
- 11、JPA-JPQL
/** * JPQL,Java Persistence Query Language 的简称.是一种和 SQL 类似的中间性和对象化查询语言,它最终会被编译成针对不同底层数据库的 SQL 查询,从而屏 ...
- JAVA记录-SpringMVC国际化配置
1.搭建SpringMVC框架,不过多阐述 2.spring-mvc.xml加入以下配置: <!-- 国际化资源配置,资源文件绑定器--> <bean id="messag ...