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

原文出处：https://blog.youkuaiyun.com/newborn2012/article/details/16897569

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

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

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

CSS代码：

[css]  view plain  copy

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

1. <div id="savewait" name="savewait">  
2.     <img src="/images/bigloader.gif" />  
3. </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，如下：

[javascript]  view plain  copy

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 class="movieplay" name="movieplay">
            <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" loop poster="" playsinline data-setup='{"fluid": true}'>
              <source src="./images/1.mp4" type='video/mp4' />
              <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
              <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
            </video>

          </div>

javascript代码：

  <script>
    $(".ljlc p a").click(function(){
      $(".movieplay").css({
        "display":"block",
        "z-index":"100",
        "filter": "alpha(Opacity=100)",
        "-moz-opacity":"1",
        "opacity": "1",
        "background-color":"#ffffff" 
      });
    })

  </script>

实现效果：

点击按钮，弹出视频