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 ...
随机推荐
- hg和git命令对照表
hg和git命令对照表 来源 https://github.com/sympy/sympy/wiki/Git-hg-rosetta-stone Git hg rosetta stone muxat ...
- 自学Linux Shell8.2-linux逻辑卷LVM管理
点击返回 自学Linux命令行与Shell脚本之路 8.2-linux逻辑卷LVM管理 Linux逻辑卷管理器软件包用来通过将另外一个硬盘上的分区加入已有文件系统,动态地添加存储空间. 1. 逻辑卷L ...
- loj #116. 有源汇有上下界最大流
题目链接 有源汇有上下界最大流,->上下界网络流 注意细节,重置cur和dis数组时,有n+2个点 #include<cstdio> #include<algorithm> ...
- BZOJ3730 震波 | 动态点分治
#include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...
- [luogu3919]可持久化数组【主席树】
链接:https://www.luogu.org/problemnew/show/P3919 分析 很明显我们可以用主席树来维护,所谓主席树就是可持久化线段树,能够查询历史版本而且可以实现修改操作,反 ...
- JS循环中使用bind函数的参数传递问题
JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...
- A1089. Insert or Merge
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- MSSQL获取当前插入的ID号及在高并发的时候处理方式
SQL Server 2000中,insert数据的时候返回自动编号的id,有三种方法实现SCOPE_IDENTITY.IDENT_CURRENT 和 @@IDENTITY,它们都返回插入到 IDEN ...
- linux下设置默认路径
查看文件: vim ~/.bash_profile 在bash_profile文件下以编辑模式插入以下代码:其中,/xxx/myname即为要设置的默认路径 SYSTEM=`uname -s` cas ...
- findbugs的使用
我们通常都会在APP上线之后,发现各种错误,尤其是空指针异常,这些错误对于用户体验来说是非常不好的,但其实大部分的问题,我们都能够提前发现. 在编写代码的过程中,可能不会时时刻刻记得检查空的引用,还有 ...