手写 JQuery 顶部 Toast 弹窗｜成功/失败提示组件（可直接复用）

一、前言

在前端项目中，操作成功、提交失败、表单校验都需要一个轻量的顶部提示弹窗（Toast）。

很多新手只会用 UI 框架的弹窗，但不会自己手写。今天带大家纯手写 JQuery 版 Toast 消息提示组件，自带：

✅ 成功绿色提示
❌ 失败红色提示
🔥 淡入淡出动画、自动消失
✨ 居中悬浮、层级最高不遮挡
📦 极简调用：一行代码直接使用
代码无冗余、可直接复制到任意 JQuery 项目复用！
二、实现效果

页面顶部居中弹出提示框
成功：绿色透明背景 + 对号图标 + 自定义文字
失败：红色浅色背景 + 错误图标 + 自定义文字
2秒自动消失，自带顺滑动画
悬浮层级最高，不会被页面内容遮挡
三、完整可运行源码

成功失败弹窗｜Toast消息提示组件

复制代码

<!-- 错误提示 DOM结构 -->
<div id="error">
    <div class="error_center">
        <img id="error_img" src="../../img/frame/error.png" alt="" />
        <span class="error_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 框架自带的弹窗，自己封装的代码更轻量、自由、可定制，适合所有中小型项目使用！