javascript div 遮罩层封锁整个页面

具体解决方案如下：一、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事件或其它时机调用。

　　推荐阅读

　　Prototype 学习工具函数学习($A方法)

$A方法: Accepts an array-like collection (anything with numeric indices) and returns its equivalent as an actual Array object. This method is a convenience alias of Array.from, but is the preferred >>>详细阅读

本文标题：javascript div 遮罩层封锁整个页面

地址：http://www.17bianji.com/kaifa2/JS/28474.html

1/2 1