弹窗插件

/**
 * 弹窗插件 by sunhaochen
 * create time 2017-10-31 17:01:27
 * **********实例的方法***********
 * show 方法显示窗口
 * showModal 方法显示带黑色透明背景遮罩的窗口
 * reset 方法重置窗口位置
 * width height 方法设置窗口宽度：弹窗实例.width('5px')
 * addEventListener removeEventListener 方法添加、删除事件：弹窗实例.addEventListener(type,callback);type可用值为show remove beforeremove reset hide;
 * remove 方法移除窗口，删除html
 * hide 方法隐藏窗口，不删除html
 * **********实例的方法***********
 *
 * **********实例的可用属性***********
 * prev 当前实例前一弹窗的实例，没有则为null
 * next 当前实例后一弹窗实例，没有则为null
 * **********实例的可用属性***********
 *
 * **********初始化实例的参数***********
 * fixed 参数窗口是否固定显示
 * title 参数窗口标题
 * content 参数窗口主体内容
 * opacity 参数窗口黑色遮罩背景透明度
 * quickClose 参数当通过showModal方法打开窗口时是否点击窗口主体以外时remove移除弹窗
 * skin 参数添加窗口class属性，定义更多的样式
 * event 参数添加回调函数，可用值为show remove beforeremove reset hide。例：event:{show:function(){},remove:function(){};}
 * **********初始化实例的参数***********
 *
 * **********类属性***********
 * lastDialog 参数保存的是最后一次实例化的对象，如果对象被remove，值就为null
 * **********类属性***********
 *
 * 使用
 * $.Dialog(object)
 */
$.Dialog = function( args ){
	return new $.Dialog.prototype.init(args||{});
}
$.Dialog.init_zindex = 1024;
$.Dialog.prototype = {
	constructor : $.Dialog,
	init : function(args){
				this.options = $.extend({
					fixed : false,
					title : '',
					content : '',
					opacity : '.5',
					skin: ''
				},args);
				this.event = {
					show: [],
					remove: [],
					beforeremove: [],
					reset: [],
					beforehide: [],
					hide: []
				}
	            for (var key in this.options.event) {
	                this.event[key] = this.event[key].concat(this.options.event[key]);
	            }
	            this.prev = this.next = null;
			},
	_posixy: function(){
		var options = this.options;
		var $e = this.node;
		var w_w = $(w).width();
		var w_h = $(w).height();
		var e_w = $e.outerWidth();
		var e_h = $e.outerHeight();
		var xy = $e.offset(top);
		var left = w_w / 2 - e_w / 2;
		// 不固定对话框
		var reltop = $(document).scrollTop() + w_h - w_h / 2 - e_h / 2;
		// 固定对话框
		var fixtop = w_h / 2 - e_h / 2;
		var top = options.fixed ? fixtop >= 0 ? fixtop : 0 : reltop >= $(document).scrollTop() ? reltop : 0;
		return {
			left : left,
			top : top
		}
	},
	_execEvent: function(type){
		for ( var i = 0; i < this.event[type].length; i++ ){
			this.event[type][i].call(this);
		}
	},
	show: function(){
		var that = this;
		var options = that.options;
		var content =  '<div class="popWindow '+ options.skin +'" style="z-index:'+ (++$.Dialog.init_zindex) +';position:'+ (options.fixed ? 'fixed' : 'absolute' ) +';">' +
						'<table width="100%">' +
						'<tr><td class="ui-header"><div class="ui-dialog-title">'+ options.title +'</div><i class="ui-dialog-close" i="close">×</i></td></tr>' +
						'<tr><td><div class="ui-body">'+ options.content +'</div></td></tr>' +
						'</table>' +
					'</div>';
		that.node = $(content).appendTo('body');
		that.node.css(that._posixy())
		.on('click','[i="close"]',function(){
			that.remove();
		})
		// 改变浏览器视口大小重置对话框位置
		$(w).on('resize',function(){that.reset();})
		if ( options.quickClose && that.background ){
			that.background.on('click',function(){
				that.remove();
			})
		}
		if ( $.Dialog.lastDialog ){
			$.Dialog.lastDialog.next = that;
			that.prev = $.Dialog.lastDialog;
		}
    	$.Dialog.lastDialog = that;
		this._execEvent('show');
		return that;
	},
	showModal: function(){
		var options = this.options;
		var background = '<div class="popWindowBg" style="z-index:'+ (++$.Dialog.init_zindex) +';position:fixed;left:0;top:0;height:100%;width:100%;background-color:rgba(0, 0, 0, '+ options.opacity +');"></div>';
		this.background = $(background).appendTo('body');
		this.show();
		return this;
	},
	reset: function(){
		this.node.css(this._posixy());
		this._execEvent('reset');
		return this;
	},
	width: function(n){
		n = +n.toString().replace('px','');
		if ( n > 0 ){
			this.node.width(n);
			this.reset();
		} else {
			console.error('width 方法需要正数参数如："1px"或1');
		}
		return this;
	},
	height: function(n){
		n = +n.toString().replace('px','');
		if ( n > 0 ){
			this.node.height(n);
			this.reset();
		} else {
			console.error('height 方法需要正数参数如："1px"或1');
		}
		return this;
	},
	addEventListener: function(type,callback){
		if ( !~$.inArray(type,['show','remove','beforeremove','reset']) ) {
			console.error('参数1有效值必须为show remove beforeremove reset');
		} else if ( !(typeof callback == 'function') ) {
			console.error('参数2有效值必须为函数');
		} else {
			this.event[type].push(callback);
		}
		return this;
	},
	removeEventListener: function(type,callback){
		if ( !~$.inArray(type,['show','remove','beforeremove','reset']) ) {
			console.error('参数1有效值必须为show remove beforeremove reset');
		} else if ( !(typeof callback == 'function') ) {
			console.error('参数2有效值必须为函数');
		} else {
			for ( var i = 0; this.event[type][i]; i++ ){
				if ( this.event[type][i] === callback ){
					delete this.event[type][i];
				}
			}
		}
		return this;
	},
	remove: function(){
		this._execEvent('beforeremove');
		this.node.remove();
		if ( this.background ){
			this.background.remove();
		}
		this._execEvent('remove');
		if ( this.prev ){
			this.prev.next = this.next;
		}
		if ( this.next ){
			this.next.prev = this.prev;
		}
		if ( $.Dialog.lastDialog === this ) {
			$.Dialog.lastDialog = this.prev
		}
	},
	hide: function(){
		this._execEvent('beforehide');
		this.node.hide();
		if ( this.background ){
			this.background.hide();
		}
		this._execEvent('hide');
		this.show = function(){
			this.node.show();
			this.background.show();
			this._execEvent('show');
		}
	}

}
$.Dialog.prototype.init.prototype = $.Dialog.prototype;