jQuery顶部提示插件实现

#topTip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

交互逻辑也不复杂，点个按钮显示提示，几秒后淡出就行，像下面这样写：

$('#myButton').click(function() {
  $('#topTip').text('这是提示信息！').fadeIn().delay(3000).fadeOut();
});

要是想让代码更通用一点，封装成jQuery 插件是个不错的选择。你可以这样写个简单版：

(function($) {
  $.fn.topTip = function(options) {
    var settings = $.extend({
      message: '提示内容',
      duration: 3000
    }, options);

return this.each(function() {
      $(this).text(settings.message).fadeIn().delay(settings.duration).fadeOut();
    });
  };
})(jQuery);

之后你只需要$('#topTip').topTip({ message: '保存成功！' })就能用，方便。嗯，如果你做后台系统、管理平台，这种顶部提示功能其实用得还蛮多的。

对了，如果你想看看一个完整的实现，可以看看这个资源，里面的代码文件名叫texiao4450_1560681011，从结构上应该就是围绕这个提示插件写的。