javascript div 遮罩层封锁整个页面


Posted in Javascript onJuly 10, 2009

具体解决方案如下:
一、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事件或其它时机调用。
Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
解决vue移动端适配问题
Dec 12 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 #Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 #Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 #Javascript
jquery Firefox3.5中操作select的问题
Jul 10 #Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 #Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 #Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 #Javascript
You might like
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php经典趣味算法实例代码
2020/01/21 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python实现日常记账本小程序
2018/03/10 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
浅析Python面向对象编程
2020/07/10 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
鲜花方阵解说词
2014/02/13 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
个人委托书范本汇总
2014/10/01 职场文书
通用员工手册范本
2015/05/14 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
用Python生成会跳舞的美女
2022/01/18 Python
Java实现二分搜索树的示例代码
2022/03/17 Java/Android