一、前言在前端项目中操作成功、提交失败、表单校验都需要一个轻量的顶部提示弹窗Toast。很多新手只会用 UI 框架的弹窗但不会自己手写。今天带大家纯手写 JQuery 版 Toast 消息提示组件自带✅ 成功绿色提示❌ 失败红色提示 淡入淡出动画、自动消失✨ 居中悬浮、层级最高不遮挡 极简调用一行代码直接使用代码无冗余、可直接复制到任意 JQuery 项目复用二、实现效果页面顶部居中弹出提示框成功绿色透明背景 对号图标 自定义文字失败红色浅色背景 错误图标 自定义文字2秒自动消失自带顺滑动画悬浮层级最高不会被页面内容遮挡三、完整可运行源码成功失败弹窗Toast消息提示组件!-- 错误提示 DOM结构 -- div iderror div classerror_center img iderror_img src../../img/frame/error.png alt / span classerror_text/span /div /div script // 封装全局Toast弹窗对象 const Toast { // 成功弹窗方法 showSuccess(message) { // 获取成功弹窗DOM let $el $(#success); // 赋值提示文本 $el.find(.success_text).text(message); // 显示弹窗 淡入 延迟淡出 $el.css(display, flex).fadeIn(200).delay(2000).fadeOut(300); }, // 失败弹窗方法 showError(message) { // 获取失败弹窗DOM let $el $(#error); // 赋值提示文本 $el.find(.error_text).text(message); // 显示弹窗动画 $el.css(display, flex).fadeIn(200).delay(2000).fadeOut(300); } }; /script四、极简调用方式核心亮点 封装完成后全局任意位置一行代码即可调用超级方便 // 成功提示 Toast.showSuccess(操作成功);// 失败提示Toast.showError(‘操作失败请重试’);五、代码逐行详细解析CSS 样式核心逻辑fixed 固定定位固定在页面顶部滚动页面不会跟随移动left:50% transform居中实现真正水平居中z-index:9999最高层级防止被其他组件遮挡默认 display:none页面默认隐藏调用时才显示成功/失败区分两套配色符合大众审美红绿清晰区分状态JS 封装思想我们将弹窗功能封装成一个 Toast 全局对象包含两个方法showSuccess()接收文本参数展示成功提示showError()接收文本参数展示失败提示JQuery 动画逻辑fadeIn(200)200ms 淡入显示delay(2000)停留2秒fadeOut(300)300ms 淡出隐藏动画节奏舒适不会生硬闪烁。六、组件优点高度封装不用重复写 DOM 和动画直接调用方法体验极佳自带动画、自动消失、顶部悬浮复用性强任意页面引入即可使用轻量无依赖只依赖 JQuery体积小、加载快语义清晰成功、失败样式完全区分用户一眼看懂状态七、组件缺点 优化方向适合新手学习同时可以继续进阶优化目前依赖 JQuery可改写为 原生 JS 无依赖版本目前固定 2秒可改造为 自定义时长缺少手动关闭按钮可自行扩展未做弹窗节流快速多次调用会重叠可加锁限制八、适用场景表单提交成功 / 失败提示删除、新增、修改操作反馈接口请求状态提示前端校验弹窗提示九、总结Toast 弹窗是前端高频必备组件。自己手写一遍能彻底掌握固定定位、动画逻辑、组件封装、JQuery 基础操作。相比 UI 框架自带的弹窗自己封装的代码更轻量、自由、可定制适合所有中小型项目使用