jQuery Growl

Growl 风格的消息提醒（源自 Mac 的弹泡通知）会在屏幕角落浮出几秒后自动消失，适合"保存成功、收到新消息"等轻提示，不打断用户当前操作。jGrowl 是基于 jQuery 的最流行实现，一条 $.jGrowl() 调用即可弹出气泡。

1. 引入 jGrowl

需要 jQuery、jGrowl 的 JS 与配套 CSS（CSS 决定气泡位置与默认外观）：

<link href="https://example.com/jquery.jgrowl.min.css" rel="stylesheet">

说明：示例中的 https://example.com 地址为占位域名，实际使用请替换为官方 CDN 或本地文件路径。
<script src="https://example.com/jquery.min.js"></script>
<script src="https://example.com/jquery.jgrowl.min.js"></script>

2. 基本用法

$.jGrowl(消息, 选项)，默认数秒后自动淡出：

$.jGrowl("欢迎来到本网站！");
// 效果：屏幕角落浮出一个圆角提示气泡，约 3 秒后自动消失，无需用户操作

3. 常用选项

选项	说明	示例
header	气泡标题栏文字	header: "通知"
life	存活毫秒数，到时自动关闭	life: 5000
sticky	true 时一直停留，需手动关闭	sticky: true
theme	内置主题：default / error / success / warning	theme: "success"
speed	出现与消失的动画速度	speed: "slow"

组合使用：

$.jGrowl("数据保存成功！", { header: "成功", theme: "success", life: 3000 });
$.jGrowl("服务器连接失败，请稍后重试", { header: "错误", theme: "error", sticky: true });
// 效果：第一条绿色气泡 3 秒后自动消失；第二条红色气泡常驻，
// 需点击其右上角的"×"（或关闭全部按钮）才会消失

4. 全局设置与回调

用 $.jGrowl.defaults 修改默认值，之后所有消息都生效；afterClose 等回调便于统计与联动：

$.jGrowl.defaults.life = 2500;    // 所有消息默认 2.5 秒
$.jGrowl.defaults.closer = true;  // 显示"关闭全部"按钮

$.jGrowl("有回调的消息", {
  afterClose: function () {
    console.log("一条消息被关闭了");   // 输出：一条消息被关闭了
  }
});

5. 什么时候不用它

Growl 适合轻量、非阻塞通知；需要用户必须确认或填写的场景（删除确认、登录表单）应改用模态框或 confirm，避免消息自动消失导致操作不可达。

小结

$.jGrowl() 一行即可弹出自动消失的角落提示，配合 header、theme、sticky、life 能覆盖成功、错误、常驻等多种场景；记住它只适合非阻塞通知，重要操作请交给模态对话框。