jq 封装弹窗提示框，自动消失，确认

自动消失：

html

<div class="hc-toast GM-none">
  <div class="hc-toast-text">-</div>
</div>

css

.hc-toast {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*
  轻提示后，可继续点击
  width: 1px;
  height: 1px;
  */
}

.hc-toast-text {
  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: content-box;
  width: fit-content;
  min-width: 100px;
  max-width: 240px;
  line-height: 20px;
  padding: 16px;
  box-shadow: 0 0 5px 5px rgba(4, 0, 0, 0.1);
  /* box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); */
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 15px;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

js，连续点击动画抖动问题

$.extend({
  /* 轻提示 */
  showToast: function(content) {
      if (!$(".hc-toast").is(':animated')) {
          $(".hc-toast-text").html(content);
          $(".hc-toast").stop(true, true).show().delay(1000).fadeOut(1000);
      } else {
          $(".hc-toast-text").html(content);
          $(".hc-toast").stop(true, true).show().delay(1000).fadeOut(1000);
      }
  }
});

使用：

$.showToast(`提示内容`)

问题注意：连续点击动画抖动问题

方案1：

这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速

$("#elemnet").stop(true, false).animate({...},1000);

stop() 这个函数的用法。
第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，默认为false，跳过当前动画效果，执行下一个动画效果；

第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候。

方案2：

var flag = false;
function aa() {
  // 动画正在执行时return
  if(flag) {
    return
  }
  // 开始执行动画时，将标记置为：true
  flag = true;
  $("#element").animated({"left" : "100"}, 1000, function() {
    // 执行完动画，重置标记
    flag = false;
  });
}

 

带确认的提示框：

html

<div class="hc-dialog GM-none">
  <div class="hc-dialog-content">-</div>
  <div class="hc-dialog-buttons">
    <span class="hc-dialog-btn hc-dialog-confirm">确认</span>
    <span class="hc-dialog-btn hc-dialog-cancel">取消</span>
  </div>
</div>

css

.hc-dialog {
  z-index: 1000;
  position: fixed;
  top: 45%;
  left: 50%;
  max-width: 320px;
  min-width: 280px;
  width: 80%;
  overflow: hidden;
  font-size: 16px;
  background-color: #fff;
  border-radius: 16px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  transition-property: all;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.hc-dialog-content {
  max-height: 60vh;
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  word-wrap: break-word;
}


.hc-dialog-buttons {
  display: flex;
}
    
.hc-dialog-btn {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  line-height: 48px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  border-top: 1px solid rgb(235, 237, 240);
}

.hc-dialog-confirm {
  flex: 1;
  border-right: 1px solid rgb(235, 237, 240);
  color: rgb(25, 137, 250);
}

.hc-dialog-cancel {
  flex: 1;
}

js

$.extend({
  /* 弹窗 */
  showDialog: function(content) {
    $(".hc-dialog-content").html(content);
    $(".hc-dialog, .hc-overlay").fadeIn(300);
  },
  hideDialog: function() {
    $(".hc-dialog, .hc-overlay").fadeOut(300);
  }
});

使用

$.showDialog(`提示内容`);
$.hideDialog();

遮罩层

html

<div class="hc-overlay GM-none"></div>

css

.hc-overlay {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}