javascript动态设置一个div图层覆盖住另一个div图层，并设置成透明

有时候我们在网页上提交数据到后台保存时，希望前台在保存过程中有一个正在保存的提示，这时可以使用一个透明div图层覆盖住编辑数据的图层，并显示等待的图标，表示正在保存中，当前数据暂时不能再编辑了，这种效果对于用户来说比较友好，下面就来总结一下关键的实现技术：

1，创建一个div图层，半透明，并且在初始时不显示

这个采用css就可以实现，并且兼容各大浏览器，如下：

CSS代码：

#savewait
{
	position:absolute;
	top:50px;
	width:800px;
	height:300px;
	filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;z-index:100; background-color:#ffffff;
	display:none;
}

这里CSS代码中的top可以先随便设置上一个值，但是不能为空，因为position如果设置为absolute之后，如果left和top都为空，其位置是相对于前一个有定位的div的，而如果top或left设置了值，则图层就相对于页面的位置，并且浮于其它图层之上，即不会和其它图层抢位置。

HTML代码：

	<div id="savewait" name="savewait">
		<img src="/images/bigloader.gif" />
	</div>

2，获取一个div图层的位置

参考：获取div的绝对位置和控制div的隐藏与显示 判断某一点是否在某一区域
要覆盖住一个div图层，就要获取这个div的绝对位置、宽度、高度，找到div的节点为p，则：

p.clientHeight     获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。   
p.clientLeft     获取    offsetLeft     属性和客户区域的实际左边之间的距离。
p.clientTop     获取    offsetTop     属性和客户区域的实际顶端之间的距离。
p.clientWidth     获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。
p.offsetHeight     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的高度。
p.offsetLeft     获取对象相对于版面或由    offsetParent     属性指定的父坐标的计算左侧位置。
p.offsetParent     获取定义对象    offsetTop     和    offsetLeft     属性的容器对象的引用。
p.offsetTop     获取对象相对于版面或由    offsetTop     属性指定的父坐标的计算顶端位置。 
p.offsetWidth     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的宽度。

这里我们采用p.offsetLeft，p.offsetTop，p.offsetWidth，p.offsetHeight。

3，设置覆盖div图层的位置

只要将css属性中的left，top，width，height设置成被覆盖div的相应值就可以，同时将display属性设置为block，如下：

        savewait.style.display = "block";
        savewait.style.top = p.offsetTop + "px";
        savewait.style.left = p.offsetLeft + "px";
        savewait.style.width = p.offsetWidth + "px";
        savewait.style.height = (p.offsetHeight-30) + "px";

这里一定要注意“px”这个单位要加上，否则设置的值根本无效。

4，保存成功之后，可以设置display为none，该覆盖图层就隐藏了。