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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
php探针不显示内存解决方法
2019/09/17 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
使用python 获取进程pid号的方法
2014/03/10 Python
解读Python中degrees()方法的使用
2015/05/18 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python开发入门——列表生成式
2020/09/03 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
优秀员工评语
2014/02/10 职场文书
给学校的建议书
2014/03/12 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
小学生节水倡议书
2015/04/29 职场文书
2015年女职工工作总结
2015/05/15 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL