功能概述：子比主题弹窗提醒能做什么？

• 多场景通知：支持成功（success）、错误（error）、警告（warning）、信息（info）、加载中（loading）5 种类型弹窗，适配不同交互场景；
• 复制反馈：用户复制网站内容时自动触发提示（如 "内容已复制！若要转载，请保留原文链接～"），兼顾版权保护与友好提示；
• 自动管理：弹窗支持自动关闭（默认 5 秒，可自定义），鼠标悬停时暂停计时，避免信息被误关；
• 动画效果：包含平滑的进入 / 退出动画、数字角标抖动提示，提升视觉体验；
• 无依赖集成：内置 Qmsg 核心实现，无需额外加载外部资源，轻量化运行。

技术解析：代码如何实现弹窗功能？

1. 样式设计：弹窗的 "颜值" 基础

• 定位与层级：弹窗采用fixed定位，默认居顶显示，z-index: 9999999确保不被其他元素遮挡；
• 容器样式：白色背景 + 阴影（box-shadow: 0 4px 12px rgba(0,0,0,.15)），圆角边框（border-radius: 4px），兼顾现代感与可读性；
• 动画关键帧：定义了MessageMoveIn（进入）、MessageMoveOut（退出）、MessageShake（抖动提示）等动画，让弹窗交互更流畅；
• 响应式适配：最大宽度限制为 80%（max-width: 80%），避免在小屏幕设备上超出显示范围。

2. 脚本逻辑：弹窗的 "大脑"

• Qmsg 集成：内置轻量级通知库 Qmsg，封装了 5 种弹窗类型的显示逻辑，支持自定义超时时间、是否显示关闭按钮等参数；
• 通知函数封装：customNotyf函数统一处理弹窗调用，自动转换类型（如将danger转为error）、处理时间单位（支持秒 / 毫秒自动转换）；
• 加载状态管理：通过loadingMsgInstance变量单独管理 "加载中" 弹窗，确保同一时间只显示一个加载提示，避免重复；
• 复制事件监听：监听copy事件，当用户复制内容时自动触发信息提示，强化版权意识；
• 动画与生命周期：通过animationend事件监听动画结束，自动销毁弹窗，释放资源。

安装与使用：3 步快速添加到子比主题

步骤 1：添加代码到主题

• 路径：WordPress 后台 → 外观 → 主题编辑器 → 选择子比主题 → 打开functions.php
• 注意：添加前建议备份文件，避免语法错误导致网站异常。

步骤 2：测试弹窗功能

• 复制测试：选中页面任意文本并复制，会自动显示 "内容已复制..." 提示；
• 手动调用：在浏览器控制台输入以下代码，测试不同类型弹窗：
   

  // 成功提示
  window.notyf('操作成功！', 'success', 3000);
  // 错误提示
  window.notyf('操作失败，请重试', 'error', 5000);
  // 加载中提示
  window.notyf('正在提交...', 'load');

步骤 3：根据需求自定义

• 默认位置：修改 CSS 中.qmsg.qmsg-wrapper的top值（默认 20px），可改为bottom: 20px让弹窗显示在底部；
• 默认时间：修改m变量中的timeout值（默认 2500 毫秒），调整弹窗自动关闭时间；
• 提示文本：修改copy事件监听中的提示内容（如改为 "复制成功，转载请注明来源"）；
• 颜色调整：修改 CSS 中qmsg-content-info等类的color值，自定义不同类型弹窗的图标颜色。

适用场景：让弹窗成为用户体验的 "加分项"

• 操作反馈：表单提交成功 / 失败、评论发布状态等，用弹窗及时告知用户结果；
• 版权提示：结合复制事件，友好提醒用户尊重原创；
• 加载状态：页面异步加载数据、图片上传时，用 "加载中" 弹窗减少用户等待焦虑；
• 系统通知：网站维护提醒、新功能上线通知等，用信息弹窗触达用户。

总结