今天一个H5页面要求发送数据请求时增加一个loading的图层,于是就自己写了一个。
实现的原理很简单,两个div,z-index设置的大一些,一个div是loading的背景,另外一个自然是旋转的菊花图。
html如下:
<div id="modal-bg" class="modal-bg"></div>
<div id="modal-img" class="modal-img"><img src="./images/loading.gif" /></div>
css样式也比较简单:
.modal-bg{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
opacity: 0.5;
z-index: 1000;
}
.modal-img {
display: none;
position: absolute;
top: 40%;
left: 40%;
width: 20%;
height: 20%;
z-index: 1001;
text-align: center;
}
样式采用绝对定位,都设置为不展示。然后modal-img的z-index属性要比modal-bg的大,这样才能显示在上面。
JavaScript代码也挺简单,我将控制他们显示/隐藏的方法写在一个方法里,方便调用,使用之前记得引入zepto(这个H5页面用于手机端,使用zepto较为轻便):
loadingModal:function(){
$('#modal-bg').toggle();</span>
$('#modal-img').toggle();</span>
}
这样子就写完了,看看效果: