这些天忙于公司项目的改版就很少来这里发表文章了，今天趁着周末休息给大家分享一个jQuery提示控件。可用于显示加载提示、错误提示、操作提示等。
先上张预览图：
提示条样式可以自己定义，支持关闭回调和锁屏，自适应居中，采用fixed定位（暂未考虑兼容IE6）。
下面是源码：
1 /**
2 * tooltip提示
3 * @author Newton---承諾ン祗愛
4 * @date 2012年04月19日晚
5 * @update 2012年04月23日重构，保证一个实例的关闭函数只能触发自身的关闭事件，加入动画缓动支持。
6 * @param object{}
7 * @type string tip: '', 提示内容，支持传入html。
8 * @type number time: 3, 自动关闭时间，以秒计时。
9 * @type boolean lock: false, 锁屏。
10 * @type string easing: 'linear' 动画缓动效果，需要缓动插件支持。
11 * @type string maskColor: '#000', 锁屏颜色。
12 * @type number maskOpacity: .3, 锁屏透明度。
13 * @type number fxSpeed: 300, 动画速度，不建议设置过大，以毫秒计时。
14 * @type number index: 999999, z-index值。
15 * @type function afterClose: $.noop 关闭后回调。
16 */
17 (function ($){
18 //提示条外层包裹
19 var tooltipWrap = $([
20 '
21 <div style="position: fixed; top:-100%; left: 50%; margin: 0; padding: 0;">',
22 '
23 <div style="position: relative; top:0; right: 50%; margin: 0; padding: 0;"></div>
24
25 ',
26 '</div>
27
28 '
29 ].join('')).appendTo(document.body);
30
31 //锁屏
32 var lockMask = $('
33 <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;"></div>
34
35 ').appendTo(document.body);
36
37 //内容包裹
38 var tootipInner = tooltipWrap.children();
39
40 //计时器id
41 var timer = null;
42
43 //实例堆栈
44 var instanceStack = null;
45
46 //默认参数
47 var defaults = {
48 tip: '',
49 time: 3,
50 fxSpeed: 300,
51 index: 999999,
52 lock: false,
53 easing: 'linear',
54 maskOpacity: .2,
55 maskBackground: '#000',
56 afterClose: $.noop
57 };
58
59 //接口
60 var tooltip = function (config){
61 //模仿静态方法，不需要用new初始化
62 if (!(this instanceof tooltip)) {
63 return new tooltip(config);
64 }
65 this.config = $.extend({}, defaults, config);
66 this.config.time = this.config.time * 1000;
67 this._initialize();
68 return this;
69 };
70
71 //原型方法
72 tooltip.prototype = {
73 //初始化函数
74 _initialize: function (){
75 clearTimeout(timer);
76 if (instanceStack !== null && instanceStack !== this) instanceStack.config.afterClose();
77 instanceStack = this;
78 tooltipWrap.css('z-index', this.config.index);
79 lockMask.css({
80 zIndex: this.config.index - 1,
81 opacity: this.config.maskOpacity,
82 background: this.config.maskBackground
83 });
84 this._toggleMask();
85 tootipInner.html(this.config.tip);
86 this._slideDown();
87 },
88 //锁屏
89 _locked: function (){
90 lockMask.fadeIn(this.config.fxSpeed);
91 },
92 //关闭锁屏
93 _unlocked: function (){
94 lockMask.fadeOut(this.config.fxSpeed);
95 },
96 //显示隐藏锁屏
97 _toggleMask: function (){
98 if (this.config.lock) {
99 this._locked();
100 } else {
101 this._unlocked();
102 }
103 },
104 //提示条滑下
105 _slideDown: function (){
106 var t = this;
107 tooltipWrap.stop(true, false).animate({
108 top: 0
109 }, this.config.fxSpeed, this.config.easing, function (){
110 t._autoClose();
111 });
112 },
113 //提示条收起
114 _slideUp: function (){
115 //保证只有当前实例才能执行关闭操作
116 if (instanceStack !== this) return;
117 var t = this;
118 this._unlocked();
119 tooltipWrap.animate({
120 top: -tooltipWrap.height()
121 }, this.config.fxSpeed, this.config.easing, function (){
122 instanceStack = null;
123 t.config.afterClose();
124 });
125 },
126 //自动关闭
127 _autoClose: function (){
128 var t = this;
129 timer = setTimeout(function (){
130 clearTimeout(timer);
131 t._slideUp();
132 }, this.config.time);
133 },
134 //关闭接口
135 close: function (){
136 this._slideUp();
137 }
138 };
139
140 //公开接口
141 window.tooltip = tooltip;
142 })(jQuery);
调用方法（依赖jQuery，每个参数的意义注释里都有，不多解释了）：
1 tooltip({
2 tip: '消息',
3 lock: true,
4 time: 6,
5 afterClose: function(){
6 alert('我关闭了！');
7 }
8 });
更新日志： 2012年04月23日：详细请见注释。 示例下载： tooltip.rar（前端组-Newton）
来源：https://www.cnblogs.com/qianduanzu/archive/2012/04/24/2467457.html