美文网首页
javascript 封装个简易的弹窗提示插件

javascript 封装个简易的弹窗提示插件

作者: 丶梵天 | 来源:发表于2016-08-13 05:17 被阅读109次

    本人实际开发中写的一些东西,作为记录,方便日后查阅和分析

    var dialog = (function(text,callback) {
            /* 创建HTML结构 */
            var html = '<div class="dialog">\
                            <div class="dialog-wrap">\
                                <div class="dialog-body">{{text}}</div>\
                                <div class="dialog-btn" id="btnOk">OK</div>\
                            </div>\
                        </div>';
    
            /* 添加到body里面,并且替换掉提示内容 */
            $('body').append(html.replace(/{{text}}/, text));
    
            /* 绑定事件 */
            $('.dialog').find('#btnOk').on('tap', function(){
                /* 判断callback是否存在,并且callback类型是function */
                if(callback && typeof callback === 'function')
                    callback();
                $('.dialog').remove(); /* 点击确定按钮后,remove掉弹窗 */
            });
    
    });
    

    调用方式:

    /* 弹出消息 */
    dialog('弹出消息');
    
    /* 回调 */
    dialog('弹出消息', function(){
      /* callback... */
    });
    

    相关文章

      网友评论

          本文标题:javascript 封装个简易的弹窗提示插件

          本文链接:https://www.haomeiwen.com/subject/zjvesttx.html