移动端Ajax返回消息替代Alert弹窗组件

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动画的兼容问题

效果图