原文出处:https://blog.csdn.net/newborn2012/article/details/16897569
有时候我们在网页上提交数据到后台保存时,希望前台在保存过程中有一个正在保存的提示,这时可以使用一个透明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>
参考:获取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";
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>
实现效果:
点击按钮,弹出视频