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

 

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

 

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

（会影响整体布局移动）

 

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

 

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

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

 

/**     * 悬浮式提示框     * @author：liuyuhang     * @param：html：要提示的内容，可注入html，换行使用
,内容简单自己修改     */    function lyhFloatTip(html) {        var random = Math.floor(Math.random() * (100000 - 10000 + 1) + 10000);        var id = 'tip-' + random;        var tip = $('
     
      ').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 = $('
      
       ').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秒，时间自行修改