tooltip提示控件

这些天忙于公司项目的改版就很少来这里发表文章了，今天趁着周末休息给大家分享一个jQuery提示控件。可用于显示加载提示、错误提示、操作提示等。

先上张预览图：

提示条样式可以自己定义，支持关闭回调和锁屏，自适应居中，采用fixed定位（暂未考虑兼容IE6）。

 

下面是源码：(注：引入该JS时放在body内，不然没效果，原因不明。)

/**
 * tooltip提示
 * @author Newton---承諾ン祗愛
 * @date 2012年04月19日晚
 * @update 2012年04月23日重构，保证一个实例的关闭函数只能触发自身的关闭事件，加入动画缓动支持。
 * @param object{}
 * @type string tip: '', 提示内容，支持传入html。
 * @type number time: 3, 自动关闭时间，以秒计时。
 * @type boolean lock: false, 锁屏。
 * @type string easing: 'linear' 动画缓动效果，需要缓动插件支持。
 * @type string maskColor: '#000', 锁屏颜色。
 * @type number maskOpacity: .3, 锁屏透明度。
 * @type number fxSpeed: 300, 动画速度，不建议设置过大，以毫秒计时。
 * @type number index: 999999,  z-index值。
 * @type function afterClose: $.noop 关闭后回调。
 */
(function ($){
    //首次初始化
    var fistInit = true;

    //提示条外层包裹
    var tooltipWrap = $([
        '<div style="position: fixed; top:-100%; left: 50%; margin: 0; padding: 0; pointer-events: none; background: transparent;">',
        '   <div style="position: relative; top:0; right: 50%; margin: 0; padding: 0; pointer-events: visiblePainted;"></div>',
        '</div>'
    ].join('')).appendTo(document.body);

    //锁屏
    var lockMask = $('<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;"></div>').appendTo(document.body);

    //内容包裹
    var tootipInner = tooltipWrap.children();

    //计时器id
    var timer = null;

    //实例堆栈
    var instanceStack = null;

    //默认参数
    var defaults = {
        tip: '',
        time: 3,
        fxSpeed: 300,
        index: 999999,
        lock: false,
        easing: 'linear',
        maskOpacity: .2,
        maskBackground: '#000',
        afterClose: $.noop
    };

    //接口
    var tooltip = function (config){
        //模仿静态方法，不需要用new初始化
        if (!(this instanceof tooltip)) {
            return new tooltip(config);
        }
        this.config = $.extend({}, defaults, config);
        this.config.time = this.config.time * 1000;
        this._initialize();
        return this;
    };

    //原型方法
    tooltip.prototype = {
        //初始化函数
        _initialize: function (){
            clearTimeout(timer);
            if (instanceStack !== null && instanceStack !== this) instanceStack.config.afterClose();
            instanceStack = this;
            tooltipWrap.css('z-index', this.config.index);
            lockMask.css({
                zIndex: this.config.index - 1,
                opacity: this.config.maskOpacity,
                background: this.config.maskBackground
            });
            this._toggleMask();
            tootipInner.html(this.config.tip);
            //平滑首次动画效果
            if (fistInit) {
                tooltipWrap.css('top', -tooltipWrap.height());
                fistInit = false;
            }
            this._slideDown();
        },
        //锁屏
        _locked: function (){
            lockMask.fadeIn(this.config.fxSpeed);
        },
        //关闭锁屏
        _unlocked: function (){
            lockMask.fadeOut(this.config.fxSpeed);
        },
        //显示隐藏锁屏
        _toggleMask: function (){
            if (this.config.lock) {
                this._locked();
            } else {
                this._unlocked();
            }
        },
        //提示条滑下
        _slideDown: function (){
            var t = this;
            tooltipWrap.stop(true, false).animate({
                top: 0
            }, this.config.fxSpeed, this.config.easing, function (){
                t._autoClose();
            });
        },
        //提示条收起
        _slideUp: function (){
            //保证只有当前实例才能执行关闭操作
            if (instanceStack !== this) return;
            var t = this;
            this._unlocked();
            tooltipWrap.animate({
                top: -tooltipWrap.height()
            }, this.config.fxSpeed, this.config.easing, function (){
                instanceStack = null;
                t.config.afterClose();
            });
        },
        //自动关闭
        _autoClose: function (){
            var t = this;
            timer = setTimeout(function (){
                t._slideUp();
            }, this.config.time);
        },
        //关闭接口
        close: function (){
            this._slideUp();
        }
    };

    //公开接口
    window.tooltip = tooltip;
})(jQuery);

调用方法（依赖jQuery，每个参数的意义注释里都有，不多解释了）：

tooltip({
    tip: '消息',
    lock: true,
    time: 6,
    afterClose: function(){
        alert('我关闭了！');
    }
});

来源：https://www.cnblogs.com/piuba/archive/2012/09/13/2683525.html