含有截止显示时间的移动端弹框信息提示插件

显示样式：

扩展配置项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();
            // }
        })