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 Object的extend是一个常用的功能
Dec 02 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 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+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JS中Location使用详解
2015/05/12 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python基于百度云文字识别API
2018/12/13 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
酒店营销策划方案
2014/02/07 职场文书
幼儿园见习报告
2014/10/30 职场文书
电子商务实训报告总结
2014/11/05 职场文书
药店营业员岗位职责
2015/04/14 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书