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
Nov 25 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 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结合表单实现一些简单功能的例子
2011/06/04 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Java中Timer的用法详解
2015/10/21 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
简单了解Django应用app及分布式路由
2019/07/24 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
修辞手法有哪些?
2019/08/29 职场文书
Python 如何安装Selenium
2021/05/06 Python