悬浮提示工具（悬浮出现自动消失）

之前做过的提示工具是使用bootstrap的模态窗做的，有人说并不好，需要点击关闭，设置时间较长

 

但是那个提示工具就是为了时间较长，必须看到才做的，也就是说，设计之初的目的就是出现错误才看到的反馈。

 

而对于一般的成功提示，非表单验证的操作提示，需要在操作出现的时候直接反馈结果，并非在固定位置显示一段文字

（会影响整体布局移动）

 

所以做了一个悬浮的提示工具，想法来源于一款游戏中的提示（具体不说，不想给打广告）

 

对于css没有仔细制作，只完成功能和简单样式，简单调用，源码简答，位置，大小等自己修改

代码如下（需要jquery，bootstrap，jquery.easi）

 

/**
     * 悬浮式提示框
     * @author：liuyuhang
     * @param：html：要提示的内容，可注入html，换行使用<br>,内容简单自己修改
     */
    function lyhFloatTip(html) {
        var random = Math.floor(Math.random() * (100000 - 10000 + 1) + 10000);
        var id = 'tip-' + random;
        var tip = $('<div>').addClass('float-tip text-center form-control').css({//提示内容div
            'background-image' : 'linear-gradient(to right, #555555 0%, #555555 70%, #333333 100%)',
            'color' : 'white',
            'height' : 'auto',
            'min-height' : '40px',
            'position' : 'fixed',
            'top' : '75%',
            'left' : '145px',
            'width' : '400px',
            'z-index' : '3200',
            'border' : '1px solid white',
            'padding' : '10px 10px 10px 50px',
            'box-shadow' : '3px 3px 3px #999999',
            'display' : 'none',
            'opacity' : 0.2,
        }).html(html).attr('id', id);//加入提示内容
        var leftDiv = $('<div>').css({
            'position' : 'fixed',
            'background-color' : 'white',
            'width' : '40px',
            'height' : '30px',
            'margin-top' : '-25px',
            'margin-left' : '-45px',
            'border-radius' : '3px',
            'color' : 'black',
            'padding' : '5px 0px'
        }).html('TIPS');
        tip.append(leftDiv);
        $('body').append(tip.show());//载入div并显示
        $('#' + id).animate({//悬浮上移动画
            top : '65%',
            opacity : '1'
        }, 1000, 'easeOutQuart');
        setTimeout(function() {//消失动画
            $('#' + id).animate({
                opacity : '0'
            }, 1000, 'easeOutQuart');
            setTimeout(function() {//移除
                $('#' + id).remove();
            }, 1000)
        }, 2000);
    }

　　lyhFloatTip('要展示的提示内容');即可调用

点击效果

 

 

 

显示到消失一共4秒，时间自行修改