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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
vue前端工程的搭建
Mar 31 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加密解密的代码
2006/10/09 PHP
透析PHP的配置文件php.ini
2006/10/09 PHP
php生成文件
2007/01/15 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
学术会议通知范文
2015/04/15 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL