jQuery通知提示

创建可自动消失的通知提示条，支持成功、警告、错误等多种状态。 · 难度：入门 · +15XP

jQuery通知提示

通知提示（Toast）是一种非侵入式的消息提醒，通常在页面角落短暂显示后自动消失，用于反馈操作结果。

设计思路

通过动态创建DOM元素，设置CSS样式，并使用.fadeIn()和.fadeOut()实现出现和消失动画。可以定义多个类型（success、error、warning）。

核心函数

function showToast(message, type) {
  var toast = $('
' + message + '
').addClass('toast ' + type);
  $('body').append(toast);
  toast.fadeIn(300).delay(3000).fadeOut(300, function() { $(this).remove(); });
}

类型样式

练习提示

在右侧代码中，添加一个“警告”按钮，调用showToast显示警告类型提示。