tips-dialog.js

$(function() { 
/*
    @param mask {Boolean}
    @param multiple {Boolean} 
    @param timeout {Number} 
    @param tipsCont {String} 
    @param autoHide {Boolean} 
    @param closeBack {Function} 
    example:
     $('.btn').on('click', function() {
    		var _this = $(this);
		$.TipsDialog({
			mask: true, //遮罩层
			multiple: false, //是否实例
			timeout: 2,  //秒
			tipsCont: _this.attr("data-tips"),//提示内容
			autoHide: false, //自动关闭
			closeBack: function (current) {//关闭按钮的回调
				console.log(current)
			}
		});
	});
 */
	(function($) {
		var Tips = function() {
			var that = this,
			body = $(document.body);
			//dialog 模板
			this.el = $('<div class="tips-dialog">\
							<div class="tips-head">\
								<h3 class="tips-title"></h3>\
								<a href="javascript:;" class="js-tips-close tips-close">X</a>\
							</div>\
							<div class="js-tips-content tips-content">\
								<span class="js-tips-icon tips-icon"></span>\
								<span class="js-tips-info">错误信息</span>\
							</div>\
						</div>');
			//dialog mask 模板
			this.mask = $('<div class="tips-mask"></div>');
			this.el.appendTo(body);
			this.mask.appendTo(body);
			this.el.find('.js-tips-close').on('click', function() {
				that.hide();
			});
		},
		//默认参数
		defaultConfig = {
			mask: true,
			multiple: false,
			timeout: 1.8,
			tipsCont: "错误信息",
			autoHide : true,
			rightImg : false,
			closeBack: function (){}
		};
		Tips.prototype = {
			init: function(config) {
				this.config = $.extend({},defaultConfig, config);
				
				this.getXY();
				this.show();
				var jsTipsIcon = this.el.find(".js-tips-icon");

				if(this.config.rightImg) {
					jsTipsIcon.addClass("tips-icon-ok");
				} else {
					jsTipsIcon.removeClass("tips-icon-ok");
				}	
				if(this.config && this.config.tipsCont !="false") {
					this.el.find(".js-tips-info").html(this.config.tipsCont);
				}
				if(this.config.autoHide) {
					if (this.config && ! isNaN(this.config.timeout)) {
						clearTimeout(this._globalID);
						this.autoHide();
					}
				}
				return this;
			},
			//获取窗口高宽、滚动条偏移量
			getXY: function() {
				var winObj = $(window),
					doc = $(document),
					self = this,
				win = {
					T: winObj.scrollTop(),
					L: winObj.scrollLeft(),
					H: winObj.height(),
					W: winObj.width()
				},
				doc = {
					H : doc.height(),
					W : doc.width()
				},
				obj = {
					H: this.el.outerHeight(true),
					W: this.el.outerWidth(true),
					L: this.el.offset().left,
					T: this.el.offset().top
				};
				self.el.css({
					left: ((win.W - obj.W) / 2) + win.L,
					top: ((win.H - obj.H) / 2) + win.T
				});
				self.mask.css({
					height: Math.max(win.H ,doc.H),
					width: Math.max(win.W, doc.W)
				});
			},
			autoHide: function() {
				var that = this;
				that._globalID = setTimeout(function() {
					that.hide();
				},1000 * that.config.timeout);
			},

			show: function() {
				if (this.config.mask) this.mask.show();
				this.el.fadeIn();
			},
			hide: function() {
				this.mask.fadeOut();
				this.el.fadeOut();
				clearTimeout(this._globalID);
				//关闭回调函数
				if(typeof this.config.closeBack !== "undefined") {
					this.config.closeBack(this.el);
				}
			}
		};
		var instance = new Tips();
		$.extend({
			TipsDialog: function(config) {
				//实例判断
				var config = config || {};
					configMultiple = config.multiple;
					
					configMultiple = configMultiple || false;
				if (configMultiple) {
					var i = new Tips();
					return i.init(config);
				} else {
					return instance.init(config);
				}
			}
		});
	})(jQuery);
})