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验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
论文指导教师评语
2014/04/28 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript