DOM结构
<div id="mesBox" class="mesBox">
<span id="mesBox_close" class="icon-close2"></span>
<div class="mesBox_state">
<div class="wait-loading">
<div class="ball-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<p id="mesBox_title" class="mesBox_title"></p>
</div>
样式表
/*tipAlerts 弹窗组件*/
.mesBox{
position: fixed;
left:19vw;
top:calc((100vh - 62vw) / 2);
width:62vw;
height:62vw;
background-color: $cover-bg;
border-radius:3vw;
z-index:99999;
.icon-close2{
position: absolute;
right:0;
top:0;
width: 10vw;
height: 10vw;
text-align: center;
line-height: 10vw;
font-size: 6vw;
color: #ddd;
}
.mesBox_state{
position: absolute;
top:14vw;
left:18vw;
width:26vw;
height:26vw;
.wait-loading{
display: none;
width:26vw;
height:26vw;
.ball-spin-fade-loader {
position: absolute;
top: 9vw;
left: 12vw;
div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
animation: ball-spin-fade-loader 1s -0.96s infinite linear; }
div:nth-child(2) {
top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
animation: ball-spin-fade-loader 1s -0.84s infinite linear; }
div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
animation: ball-spin-fade-loader 1s -0.72s infinite linear; }
div:nth-child(4) {
top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
animation: ball-spin-fade-loader 1s -0.6s infinite linear; }
div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
animation: ball-spin-fade-loader 1s -0.48s infinite linear; }
div:nth-child(6) {
top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
animation: ball-spin-fade-loader 1s -0.36s infinite linear; }
div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
animation: ball-spin-fade-loader 1s -0.24s infinite linear; }
div:nth-child(8) {
top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
animation: ball-spin-fade-loader 1s -0.12s infinite linear; }
div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute; }
}
}
}
.mesBox_title{
text-align: center;
color:#FFF;
position: absolute;
top:45vw;
width:100%;
font-size:5vw;
}
}
.mesBox.waiting{
.wait-loading{
display: block;
}
}
@-webkit-keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/*date 2017/11/18*/
Javascript代码(需jquery/zepto)
/************弹窗组件开始**************/
var errTips=null;
function tips(mes, state, autoHide, hideTime){
var mesBox=$("#mesBox"),title=$("#mesBox_title"),_close=$("#mesBox_close"),isShow=false;
this.set = function(_mes, _state, _autoHide, _hideTime){
mes=_mes;
state=_state;
autoHide=_autoHide;
hideTime=_hideTime;
this.init();
};
this.init=function () {
if(autoHide == undefined) autoHide = 1;
if(hideTime == undefined) hideTime = 5000;
if(state ==1) hideTime = 5000;
title.html(mes);
if(state == 1){
mesBox.removeClass("failure");
mesBox.removeClass("waiting");
mesBox.addClass("success");
}else if(state==2){
mesBox.removeClass("failure");
mesBox.removeClass("success");
mesBox.addClass("waiting");
}else{
mesBox.removeClass("success");
mesBox.removeClass("waiting");
mesBox.addClass("failure");
}
if(autoHide==1){
setTimeout("tipAlerts_hide()",hideTime)
}
};
this.show=function () {
if(!isShow){
isShow = true;
mesBox.show();
}
};
this.hide=function () {
if(isShow){
isShow = false;
mesBox.hide();
}
};
_close.click(function () {
isShow=false;
mesBox.hide();
});
this.init()
}
function tipAlerts(mes, state, autoHide, hideTime) {
if(errTips==null){
errTips = new tips(mes, state, autoHide, hideTime);
}else{
errTips.set(mes,state, autoHide, hideTime);
}
errTips.show();
}
function tipAlerts_hide(){
if(errTips != null){
console.log(errTips);
errTips.hide();
}
}
/*date 2017.11.23*/
/*******弹窗组件结束*******/
浏览器兼容
1.只针对移动端,主要是CSS动画的兼容问题