js 面向对象编程 - 提示

<div class="notice" id="noticeBox">
  <div class="close-btn" title="关闭">
      <svg t="1574043429318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5339" width="10" height="10"><path d="M583.168 523.776L958.464 148.48c18.944-18.944 18.944-50.176 0-69.12l-2.048-2.048c-18.944-18.944-50.176-18.944-69.12 0L512 453.12 136.704 77.312c-18.944-18.944-50.176-18.944-69.12 0l-2.048 2.048c-19.456 18.944-19.456 50.176 0 69.12l375.296 375.296L65.536 899.072c-18.944 18.944-18.944 50.176 0 69.12l2.048 2.048c18.944 18.944 50.176 18.944 69.12 0L512 594.944 887.296 970.24c18.944 18.944 50.176 18.944 69.12 0l2.048-2.048c18.944-18.944 18.944-50.176 0-69.12L583.168 523.776z" fill="#8a8a8a" p-id="5340"></path></svg>
  </div>
  <div class="text"></div>
  <div class="margin-t-30 text-right" id="confirm-btn" style="display: none;"> 
    <button type="button" onclick="closeBox()" class="btn btn-white color-grey">取消</button> 
    <button type="button" id="confirmBtn" onclick="loginOut()" class="btn btn-orange">确认</button>
  </div>
</div>

js 面向对象编程

 function Notice(){
    this.status = "";
    this.tipText = "";
    this.confirmText = "确定";
    this.timer = null;
  }
  Notice.prototype.confirm = function (status,tipText,confirmText,callback){
    clearTimeout(this.timer);
    this.confirmText = confirmText;
    $($("#confirm-btn button")[1]).text(`${this.confirmText}`);
    $("#confirm-btn").show();
    this.updateNotice(status,tipText,true);
  }
  Notice.prototype.updateNotice = function(status,tipText,isStop){
    this.status = status;
    this.tipText = tipText;
    $("#noticeBox").addClass(`${this.status}`).css("top","200px").css("opacity","1").find(".text").text(`${this.tipText}`);
    if(!isStop){
      this.autoClose()
    }
  }
  Notice.prototype.autoClose = function(){
    this.timer = setTimeout(()=>{
      this.closeBox();
    },6000)
  }
  Notice.prototype.closeBox = function(){
    $("#noticeBox").css("opacity","0").css("top","-999px").removeClass(`${this.status}`);
    $("#confirm-btn").hide();
  }
  let notice = new Notice();
  $(document).on("click","#noticeBox .close-btn",function(){
    notice.closeBox();
  })

.notice{
  position: fixed;
  /* top: 200px; */
  background-color: #fff;
  top: -999px;
  left: 50%;
  margin-left: -125px;
  z-index: 9999;
  padding: 20px;
  border-radius: 4px;
  width: 250px;
  opacity: 0;
  color: #333;
  transform: scale(1);
  transition: all 1.5s ease-in-out;
  border: 1px solid #ffa066;
}
.notice.notice-success{
  color: #4CAF50;
}
.notice.notice-error{
  color: #f43636;
}
.notice.notice-info{
  color: #2196F3;
}
.notice.notice-warning{
  color: #FF9800;
}
.notice .text{
  text-align: left;
}
.notice .close-btn{
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor:pointer;
}