javascript div 遮罩层封锁整个页面

更新时间：2009年07月10日 22:08:50 作者：

在客户端浏览器中，可以在某个时机使用javascript把一个div作为遮罩层，来封锁整个页面。

具体解决方案如下：
一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeight属性的差别。
clientHeight
在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下，offsetHeight也是浏览器可视区域的高（包括边线）
在FF下，offsetHeight是页面具体内容的高度
scrollHeight
在IE下，scrollHeight 是页面具体内容的高度，可以小于clientHeight
在FF下，scrollHeight 是网页内容高度，不过最小值是clientHeight
二、下面是跨浏览器取得当前页面的高度的解决方法。

复制代码代码如下:

function getPageSize() 
{ 
var body = document.documentElement； 
var bodyOffsetWidth = 0; 
var bodyOffsetHeight = 0; 
var bodyScrollWidth = 0; 
var bodyScrollHeight = 0; 
var pageDimensions = [0,0]; 
pageDimensions[0]=body.clientHeight; 
pageDimensions[1]=body.clientWidth; 
bodyOffsetWidth=body.offsetWidth; 
bodyOffsetHeight=body.offsetHeight; 
bodyScrollWidth=body.scrollWidth; 
bodyScrollHeight=body.scrollHeight; 
if(bodyOffsetHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyOffsetHeight; 
} 
if(bodyOffsetWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyOffsetWidth; 
} 
if(bodyScrollHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyScrollHeight; 
} 
if(bodyScrollWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyScrollWidth; 
} 
return pageDimensions; 
} 

三、页面上必须放置一个div，作为遮罩层，下面是这个遮罩层的css样式。

复制代码代码如下:

.lockDiv 
{ 
position:absolute; 
left:0; 
top:0; 
height:0; 
width:0; 
border:2 solid red; 
display:none; 
text-align:center; 
background-color:#DBDBDB; 
filter:Alpha(opacity=60); 
} 

四、在客户端使用下面的javascript用遮罩层将整个页面封闭。

复制代码代码如下:

var sandglassSpan = 1; 
var timeHdl; 
function DisablePage() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass.style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
ctrlSandglass.style.display = "block"; 
timeHdl = window.setTimeout(DisablePage,200); 
} 
} 

五、如果页面上使用了ASP.net的Validator控件，那么应该使用如下的javascript。

复制代码代码如下:

var sandglassSpan = 1; 
var timeHdl; 
function DisablePageHaveValidator() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(false == Page_IsValid) 
{ 
sandglassSpan = 0; 
} 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
ctrlSandglass.style.display = "block"; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass.style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
timeHdl = window.setTimeout(DisablePageHaveValidator, 200); 
} 
} 

六、DisablePage和DisablePageHaveValidator这两个方法可以在按钮的onclick事件或其它时机调用。

您可能感兴趣的文章:

使用JS判断页面是首次被加载还是刷新
这篇文章主要介绍了js判断页面是首次被加载还是刷新，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
JavaScript设计模式之迭代者模式详情
这篇文章主要介绍了JavaScript设计模式之迭代者模式详情，迭代器设计模式能够可以让我们更方便的且有规矩的进行访问复合数据的每一项，也可以通过迭代器进行完成一些流线式操作
2022-06-06
jquery单行文字向上滚动效果的实现代码
这篇文章主要介绍了jquery单行文字向上滚动效果的具体实现，此效果适应于很多场景，会的不会的都要学习下啊
2014-09-09
JS中art-template模板使用过滤器问题
这篇文章主要介绍了JS中art-template模板使用过滤器问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Layui多选只有最后一个值的解决方法
今天小编就为大家分享一篇Layui多选只有最后一个值的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS实现控制文本框的内容
下面小编就为大家带来一篇JS实现控制文本框的内容。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JavaScript引用类型Date常见用法实例分析
这篇文章主要介绍了JavaScript引用类型Date常见用法,结合实例形式分析了引用类型Date基本创建、参数使用及相关注意事项,需要的朋友可以参考下
2018-08-08
javascript实现仿腾讯游戏选择
这篇文章主要介绍了javascript实现仿腾讯游戏选择，简单实现的下拉菜单二级联动效果，十分不错，有需要的小伙伴可以参考下。
2015-05-05
前端插件之Bootstrap Dual Listbox使用教程
这篇文章主要介绍了前端插件之Bootstrap Dual Listbox使用教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-07-07
bootstrap监听滚动实现头部跟随滚动
这篇文章主要为大家详细介绍了bootstrap监听滚动实现头部跟随滚动,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11