之前做过的提示工具是使用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秒,时间自行修改