含有截止顯示時間的移動端彈框資訊提示外掛
阿新 • • 發佈：2018-11-05
顯示樣式：
擴充套件配置項js：
/** * modal * elemet 繫結啟用的單機元素 * @param * title {string} 彈框的標題 * content {string} 內容 * footer 底部 * sure 確定按鈕的dom元素class類名 * cancel 取消按鈕的dom元素class類名 * boxhide 點選灰色部分關閉彈框（預設為true） * shadowhide {boolean}點選灰色部分關閉彈框（預設為true） * close 關閉按鈕class類名 * 時間相關： * endtime {string} 結束時間：在指定的時間後，不再觸發該方法 * @example "2014-07-10 10:21:12" * timetoken {object} 當存在對應儲存storage時不顯示彈框 * （使彈框只顯示一次） * @param * name {string} 儲存鍵名 * type {string} 儲存型別 * local 永久儲存 * session 會話儲存 * @example * timetoken:{ * name:'timetoken', * type:'session', * }, * 顏色： * surebtncolor: {string} 確定按鈕背景顏色預設#f4f4f4 * @example:surebtncolor:'#333', * surefontcolor: {string} 確定按鈕文字顏色預設#666 * @example:surefontcolor:'#fff', * back 回撥函式（點選確定按鈕後觸發） **/
js
function ztmodal(options){ let create = function(){ this.elemet = $(this); this.options = { 'title':options.title||'', 'content':options.content||'', 'footer':options.footer||'', 'sure':$(options.sure)||'','cancel':$(options.cancel)||'', 'shadowhide':options.shadowhide||true, }; // this.storagetoken(options.timetoken.name,options.timetoken.type); // 先判斷是否到截止時間(有截止時間在時間後不建立例項)： if(options.endtime){ // 截止時間判斷 if(this.endtime(options.endtime)){// 本地是否出現過彈框 if(options.timetoken==undefined){ this.init() }else{ this.storagetoken(options.timetoken.name,options.timetoken.type)?this.init():false; } }else{ return false; } }else{ this.init() } (options.sure)?this.sure():'void(0)'; (options.cancel)?this.cancel():'void(0)'; (options.close)?this.close():'void(0)'; (this.options.shadowhide)?this.shadowhide():''; this.show(); }; // 初始化dom元素 create.prototype.init = function(){ let surebtn = (options.sure)?`<a href='javascript:;' class='btn ${options.sure}' style='background-color:${options.surebtncolor};color:${options.surefontcolor}'>確定</a>`:'', cancelbtn = (options.cancel)? `<a href='javascript:;' class='btn ${options.cancel}'>取消</a>`:'', closebtn = (options.close)?`<a href="javascript:void(0)" class="close iconfont ${options.close}"></a>`:''; $('body').append(` <div id='modal-shadow' style='display:none'> <div id='modal' class='modal'> ${closebtn} <div class='modal-header'> ${this.options.title} </div> <div class='modal-content'> ${this.options.content} </div> <div class='modal-footer'> ${this.options.footer} </div> <div class='modal-bottom-group'> ${surebtn}${cancelbtn} </div> </div> </div> ` ); }; // 回撥 create.prototype.back = () => { typeof(options.back)==="function"?options.back():'undefined'; }; // 確定按鈕 create.prototype.sure = () => { let sure = (options.sure)?$('.'+options.sure):''; sure.bind('touchend',function(e){ e.preventDefault(); if(typeof(options.back)==="function"){ create.prototype.back(); }else{ $('#modal-shadow').fadeOut(500,function(){ $(this).remove(); }); } }); }; // 取消按鈕 create.prototype.cancel = () => { let cancel =(options.cancel)?$('.'+options.cancel):''; cancel.bind('touchend',function(e){ if(e.target==this&&boxhide){ e.preventDefault(); create.prototype.hidebox() } }); }; // 關閉按鈕 create.prototype.close = () => { let close =(options.close)?$('.'+options.close):''; close.bind('touchend',function(e){ e.preventDefault(); create.prototype.hidebox() }); }; // 顯示動畫 create.prototype.show = () => { // console.log(create) let aim = $('#modal-shadow'); aim.fadeIn(500); // 阻止冒泡 aim.bind('touchmove',function(e){ if(e.target==this){ return false; } }); }; // 隱藏彈框 create.prototype.hidebox = () => { $('#modal-shadow').fadeOut(500,function(){ $(this).remove(); }); }; // 點選外部關閉彈框 create.prototype.shadowhide = () => { $('#modal-shadow').bind('touchend',function(e){ e.preventDefault(); $('#modal-shadow').fadeOut(500,function(){ $(this).remove(); }); }); }; // 在指定時間之前顯示彈框（處理輸入的時間格式） create.prototype.endtime = (time) => { // 轉變為時間物件後轉變為時間戳 let endtime = new Date(time).getTime(); let persontime = new Date().getTime(); if(endtime<persontime){ return false; }else{ return true; } }; // 是否存在對應的儲存token有則不顯示彈框 create.prototype.storagetoken = (token,type) =>{ if(type=='local'){ if(localStorage.getItem(token)){ return false; }else{ localStorage.setItem(token,true); return true; } }else if(type=='session'){ if(sessionStorage.getItem(token)){ return false; }else{ sessionStorage.setItem(token,true); return true; } }else{ alert('請輸入對應的臨時資料型別type值') return false; } }; return new create(); }
css
@import url("http://at.alicdn.com/t/font_832282_7pso113yrmh.css"); #modal-shadow { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } #modal-shadow .modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 0.4rem; border-radius: 0.26666667rem; } #modal-shadow .modal-header { text-align: center; border-bottom: 1px solid #e5e5e5; line-height: 0.8rem; font-size: 0.48rem; width: 100%; left: 0; color: #333; } #modal-shadow .modal-content { font-size: 0.37333333rem; padding: 0.4rem 0; color: #666; min-width: 6.66666667rem; } #modal-shadow .modal-bottom-group { border-top: 1px solid #e5e5e5; display: flex; } #modal-shadow .modal-bottom-group .btn { justify-content: space-between; flex-grow: 1; text-align: center; font-size: 0.42666667rem; color: #666; text-decoration: none; line-height: 0.8rem; background-color: #f4f4f4; border-radius: 0.08rem; margin-top: 0.26666667rem; } #modal-shadow .modal .close { position: absolute; width: 0.8rem; height: 0.8rem; right: -0.4rem; top: -0.4rem; background-color: #fff; border-radius: 50%; color: #333; font-size: 0.53333333rem; line-height: 0.8rem; text-align: center; }
html頁面內呼叫
ztmodal({ title:'系統維護公告', content:'親愛的使用者：<br>您好！<br>XXXXXXXXXXXXXXXXXXXXXXXXXX（本週六）8：00，XXXXXXXXXXXXXXXXX，在此期間將暫停實名認證的服務。給您帶來的不便，敬請諒解！', sure:'sure-btn', close:'icon-modal-close', endtime:'2018-12-15 08:00:00', // timetoken:{ // name:'timetoken', // type:'session', // }, // cancel:'cancel-btn', // back:function(){ // // console.log('回撥函式') // $('#modal-shadow').fadeOut(); // } })