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中使用css需要注意的地方小结
Sep 01 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
javascript实用方法总结
Feb 06 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
js面向对象的写法
2016/02/19 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python数值基础知识浅析
2019/11/19 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
Python实现粒子群算法的示例
2021/02/14 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
生产副总岗位职责
2013/11/28 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
高中班级口号
2014/06/09 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
卡特教练观后感
2015/06/08 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL