Toastr.js 演示

轻量级、非阻塞的通知提示库，提供优雅的用户反馈体验

GitHub

基本通知类型

点击按钮查看不同类型的通知效果

// 基本用法示例
toastr.success('操作成功！');
toastr.info('这是一条信息');
toastr.warning('请注意！');
toastr.error('发生错误！');

通知位置

点击不同位置的按钮查看通知在该位置的显示效果

左上角
上方中央
右上角
左下角
下方中央
右下角
点击任意位置查看通知效果
// 设置通知位置
toastr.options.positionClass = 'toast-top-right';
toastr.options.positionClass = 'toast-bottom-center';

高级配置

持续时间设置
交互功能
// 高级配置示例
toastr.options = {
  timeOut: 5000, // 5秒后自动消失
  progressBar: true, // 显示进度条
  closeButton: true, // 显示关闭按钮
  newestOnTop: true, // 新通知在顶部
  preventDuplicates: true // 防止重复通知
};

自定义样式

// 自定义CSS类
toastr.options.toastClass = 'custom-toast';
toastr.options.iconClasses = {
  error: 'toast-error custom-error',
  info: 'toast-info custom-info'
};

实际应用场景

用户操作
系统状态
通知计数器
已发送通知: 0

功能特点

轻量级

压缩后只有几KB，不会影响页面加载速度

响应式

完美适配桌面和移动设备

可定制

丰富的配置选项和样式定制

自动消失

支持自定义显示时长和自动消失

交互友好

支持点击、悬停和关闭操作

非阻塞

不会阻塞用户界面和操作流程