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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
js仿微信抢红包功能
Sep 25 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
javascript 写类方式之三
2009/07/05 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python 快速排序代码
2009/11/23 Python
Python 文件读写操作实例详解
2014/03/12 Python
python学习笔记:字典的使用示例详解
2014/06/13 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
大专自我鉴定范文
2013/10/01 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
新教师教学工作总结
2015/08/14 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Python socket如何解析HTTP请求内容
2022/02/12 Python