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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP用户指南-cookies部分
2006/10/09 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
Vue实现购物车功能
2017/04/27 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
python列表操作实例
2015/01/14 Python
django富文本编辑器的实现示例
2019/04/10 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python实现猜数游戏
2020/03/27 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
利用python实现汉诺塔游戏
2021/03/01 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
企业后勤岗位职责
2014/02/28 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
保送生自荐信范文
2015/03/26 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers
Java使用HttpClient实现文件下载
2022/08/14 Java/Android