万能的弹框

/**
 * 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    回调函数（点击确定按钮后触发）
 *
 */
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();
}

html

    ztmodal({
        title:'系统维护公告',
        content:'亲爱的用户：<br>您好！<br>您好本系统将于2018年9月14日（本周五）20:00至2018年9月15日（本周六）8：00，进行12小时的系统升级维护，在此期间将暂停实名认证的服务。给您带来的不便，敬请谅解！',
        sure:'sure-btn',
        close:'icon-modal-close',
        endtime:'2018-09-15 08:00:00',
        // timetoken:{
        //     name:'timetoken',
        //     type:'session',
        // },
        // cancel:'cancel-btn',
        // back:function(){
        //     // console.log('回调函数')
        //     $('#modal-shadow').fadeOut();
        // }
    })