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

向右看齐 2022-05-28 03:56 256阅读 0赞

原文出处：https://blog.csdn.net/newborn2012/article/details/16897569

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

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

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

CSS代码：

**\[css\]**  [view plain][]  [copy][view plain]

1.  \#savewait  
2.  \{  
3.      position:absolute;  
4.      top:50px;  
5.      width:800px;  
6.      height:300px;  
7.      filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;z-index:100; background-color:\#ffffff;  
8.      display:none;  
9.  \}

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

HTML代码：

**\[html\]**  [view plain][]  [copy][view plain]

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

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

参考：[获取div的绝对位置和控制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，如下：

**\[javascript\]**  [view plain][]  [copy][view plain]

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

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

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

本人自身实现：

CSS代码：

.movieplay\{  
      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;

正文代码：

</div>

javascript代码：

</script>

实现效果：

点击按钮，弹出视频

[view plain]: https://blog.csdn.net/newborn2012/article/details/16897569#
[div_div_]: http://hi.baidu.com/uzjojfztqubfiuq/item/32737628bc2a58d60e37f985