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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP中GET变量的使用
2006/10/09 PHP
php批量上传的实现代码
2013/06/09 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python进行两个表格对比的方法
2018/06/27 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
New delete 与malloc free 的联系与区别
2013/02/04 面试题
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis