类dialog的弹窗插件

前端开发过程中，弹窗的使用越来越广泛，使用性越来越强，使用过dialog插件之后，萌生了自己编写一个类dialog的弹窗插件，同时，也是第一次编写插件，写得不好，麻烦各位看官指出交流！

这个插件在开始时，是使用jQuery的 $.fn.optionName = function(){} 的方式编写；因为每次的弹窗都是动态生成的，但是在测试的是否，发现每次执行回调函数的时候，在除第一次执行，都会执行多次的bug。因为每次初始化的时候，并没有消除之前初始化的执行函数；

所以最后使用构造函数的方式实现。

废话不多说，code…

;var w_dialog = (function($){
    var dialog = function(options){
        this.width = options.width || 400;                      // 定义宽度
        this.height = options.height || "auto";                 // 定义高度
        this.title = options.title || "提示";                 // 定义标题
        this.contant = options.contant || "是否确定";           // 定义弹层内容，可以是html
        this.islayer = options.islayer;                         // 是否定义蒙板 布尔值
        this.define = options.define || "确定";                   // 定义按钮确定文字
        this.cancle = options.cancle || "取消";                   // 定义取消的文字
        this.doDefine = options.doDefine || function(){};       // 定义确定按钮时的回调函数
        this.doCancle = options.doCancle || function(){};       // 定义取消按钮时的回调函数
        this.customBotton = options.customBotton;               // 是否定义自定义按钮 布尔值
        this.is_meng;                                           // 初始化是否显示蒙板
        this.is_cus_botton;                                     // 初始化是否自定义按钮
    };
    dialog.prototype = {
        show : function(){      //渲染html
            var that = this;
            var str = '';
            this.is_meng = (that.islayer == undefined) ? true : (that.islayer ? true : false);
            this.is_cus_botton = (that.customBotton == undefined) ? true : (that.customBotton ? false : true);
            if(this.is_meng){
                str += '<div class="w-dialog-layer"></div>';
                str += '<div class="w-dialog-contant w-dialog-transiton">';
                str += '<div class="w-dialog-main">';
                str += '<div class="w-dialog-close w-dialog-transiton">×</div>';
                str += '<div class="w-dialog-title">' + that.title + '</div>';
                str += '<div class="w-dialog-content">' + that.contant + '</div>';
                if(this.is_cus_botton){
                    str += '<div class="w-dialog-comfire">';
                    str += '<button class="w-dialog-bottom w-dialog-transiton w-dialog-comfire w-dialog-autofocus" data-dialog-comfire="comfire">' + that.define + '</button>';
                    str += '<button class="w-dialog-bottom w-dialog-transiton w-dialog-cancle" data-dialog-cancle="cancle">'+ that.cancle +'</button>';
                    str += '</div>';
                };
                str += '</div>';
                str += '</div>';
            }else{
                str += '<div class="w-dialog-contant w-dialog-transiton">';
                str += '<div class="w-dialog-main">';
                str += '<div class="w-dialog-close w-dialog-transiton">×</div>';
                str += '<div class="w-dialog-title">' + that.title + '</div>';
                str += '<div class="w-dialog-content">' + that.contant + '</div>';
                if(this.is_cus_botton){
                    str += '<div class="w-dialog-comfire">';
                    str += '<button class="w-dialog-bottom w-dialog-transiton w-dialog-comfire" data-dialog-comfire="comfire">' + that.define + '</button>';
                    str += '<button class="w-dialog-bottom w-dialog-transiton w-dialog-cancle" data-dialog-cancle="cancle">'+ that.cancle +'</button>';
                    str += '</div>';
                }
                str += '</div>';
                str += '</div>';
            };
            $('body').append(str).addClass('w-body-over');
            that.init_show();
        },
        auto_position : function(obj){          //自适应定位
            var that = this;
            var _w = parseInt($(window).width());
            var _h = parseInt($(window).height());
            var layer_w = ( that.width >_w ) ? "80%" : that.width;
            var layer_h = (typeof that.height == 'number')? that.height : parseInt($('.w-dialog-main').height());
            var layer_left = ( that.width >_w ) ? "10%" : (_w/2) - (parseInt(that.width)/2);
            var layer_top = (layer_h > 600) ? 40 : (_h/2) - (layer_h/2) - 50;
            obj.css({
                width: layer_w,
                height: (typeof that.height == 'number')? that.height : "auto",
                left: layer_left,
                top: layer_top
            });
        },
        init_show: function(){      //初始化弹窗的相关事件
            var that = this;
            var main = $('.w-dialog-contant');             // 定义内容区
            setTimeout(function(){                          //增加一个滑出动画
                main.addClass('w-dialog-active');
                $('button.w-dialog-comfire').focus();
            },10);
            that.auto_position(main);
            $(window).resize(function(){                   //自适应
                that.auto_position(main);
            });
            var cha = $('div.w-dialog-close');             // 关闭dom
            var cancle = $('button.w-dialog-cancle');      // 取消dom
            var comfire = $('button.w-dialog-comfire');        // 确定dom
            cha.click(function(){
                that.close();
            });
            cancle.click(function(event){
                event.stopPropagation();
                that.is_function(that.doCancle);
            });
            comfire.click(function(event){
                event.stopPropagation();
                that.is_function(that.doDefine);
            })
        },
        close : function(){             //关闭弹窗
            var that = this;
            if(this.is_meng){
                $(document).find('.w-dialog-layer').remove();
                $(document).find('.w-dialog-contant').remove();
                $('body').removeClass('w-body-over');
            }else{
                $(document).find('.w-dialog-contant').remove();
                $('body').removeClass('w-body-over');
            };
        },
        is_function: function(fun){     //按钮触发的回调函数
            var that = this;
            if(typeof fun === 'function'){
                fun();
                that.close();
            }else{
                console.log( fun + ' ' + "应该是一个函数");
            }
        }

    };

    return  dialog

})(jQuery);

使用方式也很简单，跟dialog的使用方式一样

使用方法：

$(selectior).click(function(){
    var f = new w_dialog({
        //里面是配置项
        width: 500,
        contant: '我们都是好孩子'
    }).show();
})

说明：就是在你要触发的事件new一个新的弹窗对象,show()方法是调用弹窗的方法。

个别参数说明提示：

customBotton : 是否启动自定义按钮，默认值是false, 非自定义，当为true时是自定义按钮，此时，自定义按钮的html需要在contant属性中添加，当然，此时的弹窗内容，同样也需要是html的方式插入；同样，如果需要按钮的回调函数生效的话，自定义按钮标签是button,
即：<button class="w-dialog-comfire">确定</button>
   <button class="w-dialog-cancle">取消</button>