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

效果图