1 <div class="notice" id="noticeBox"> 2 <div class="close-btn" title="关闭"> 3 <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> 4 </div> 5 <div class="text"></div> 6 <div class="margin-t-30 text-right" id="confirm-btn" style="display: none;"> 7 <button type="button" onclick="closeBox()" class="btn btn-white color-grey">取消</button> 8 <button type="button" id="confirmBtn" onclick="loginOut()" class="btn btn-orange">确认</button> 9 </div> 10 </div>
js 面向对象编程
1 function Notice(){ 2 this.status = ""; 3 this.tipText = ""; 4 this.confirmText = "确定"; 5 this.timer = null; 6 } 7 Notice.prototype.confirm = function (status,tipText,confirmText,callback){ 8 clearTimeout(this.timer); 9 this.confirmText = confirmText; 10 $($("#confirm-btn button")[1]).text(`${this.confirmText}`); 11 $("#confirm-btn").show(); 12 this.updateNotice(status,tipText,true); 13 } 14 Notice.prototype.updateNotice = function(status,tipText,isStop){ 15 this.status = status; 16 this.tipText = tipText; 17 $("#noticeBox").addClass(`${this.status}`).css("top","200px").css("opacity","1").find(".text").text(`${this.tipText}`); 18 if(!isStop){ 19 this.autoClose() 20 } 21 } 22 Notice.prototype.autoClose = function(){ 23 this.timer = setTimeout(()=>{ 24 this.closeBox(); 25 },6000) 26 } 27 Notice.prototype.closeBox = function(){ 28 $("#noticeBox").css("opacity","0").css("top","-999px").removeClass(`${this.status}`); 29 $("#confirm-btn").hide(); 30 } 31 let notice = new Notice(); 32 $(document).on("click","#noticeBox .close-btn",function(){ 33 notice.closeBox(); 34 })
1 .notice{ 2 position: fixed; 3 /* top: 200px; */ 4 background-color: #fff; 5 top: -999px; 6 left: 50%; 7 margin-left: -125px; 8 z-index: 9999; 9 padding: 20px; 10 border-radius: 4px; 11 width: 250px; 12 opacity: 0; 13 color: #333; 14 transform: scale(1); 15 transition: all 1.5s ease-in-out; 16 border: 1px solid #ffa066; 17 } 18 .notice.notice-success{ 19 color: #4CAF50; 20 } 21 .notice.notice-error{ 22 color: #f43636; 23 } 24 .notice.notice-info{ 25 color: #2196F3; 26 } 27 .notice.notice-warning{ 28 color: #FF9800; 29 } 30 .notice .text{ 31 text-align: left; 32 } 33 .notice .close-btn{ 34 position: absolute; 35 top: 0; 36 right: 0; 37 width: 20px; 38 height: 20px; 39 text-align: center; 40 cursor:pointer; 41 }