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 相关文章推荐
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
js Event对象的5种坐标
Sep 12 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
JavaScript数据类型详解
Apr 01 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
js表头排序实现方法
2015/01/16 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
六个窍门助你提高Python运行效率
2015/06/09 Python
python复制文件到指定目录的实例
2018/04/27 Python
python类的实例化问题解决
2019/08/31 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
大专应届生个人简历的自我评价
2013/10/15 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
材料员岗位职责
2014/03/13 职场文书
商铺租赁意向书
2014/04/01 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
物流管理专业推荐信
2014/09/06 职场文书
小学运动会入场口号
2015/12/24 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
mysql函数全面总结
2021/11/11 MySQL
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
vue实现滑动解锁功能
2022/03/03 Vue.js
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python