Toast - 在你的网站上添加动态通知

2026-01-14 18:39:46作者：晏闻田Solitary

如果你正在寻找一种简单的方式来在你的网站上添加动态通知，那么 Toast 是一个非常好的选择。

一、简介

Toastify.js 是一款轻量级的 JavaScript 库，可以让你轻松地向网页中添加各种类型的动态通知消息。这些通知消息支持多种样式和配置选项，你可以根据自己的需求来自定义它们的样子。

二、功能特性

轻量级，压缩后的文件大小只有2KB。
支持多种样式和配置选项。
提供了丰富的 API 接口，方便你在代码中灵活使用。
可以自定义通知消息的位置、时长、动画效果等参数。
支持显示图标和回调函数。

三、快速开始

要在你的项目中使用 Toastify.js ，你需要先将它引入到你的 HTML 文件中：

<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

接下来，你可以通过调用全局函数 Toastify() 来创建一个通知消息，并设置相应的参数：

Toastify({
    text: "Hello, World!",
    duration: 3000,
    close: true,
    gravity: "top", // 位置
    positionLeft: true, // 是否靠左显示
    backgroundColor: "linear-gradient(to right, #ffffff, #ff0000)",
}).showToast();

上面的代码会在页面上生成一条红色背景的通知消息，内容为 "Hello, World!" 。该消息会在3秒后自动消失。

你可以通过调整参数值来改变通知消息的外观和行为。具体的参数列表和说明，请参见官方文档。

四、应用场景

Toastify.js 的应用场景非常广泛，可以用于以下场景：

显示提示信息或错误信息。
告知用户某个操作已经成功完成。
提醒用户关注某些重要事项。

下面是一些使用示例：

示例1：显示成功信息

Toastify({
    text: "操作成功！",
    duration: 3000,
    backgroundColor: "#4CAF50",
    textColor: "white"
}).showToast();

示例2：显示警告信息

Toastify({
    text: "警告：该功能尚未实现。",
    duration: 5000,
    close: false,
    gravity: "bottom", // 底部显示
    positionRight: true, // 靠右显示
    backgroundColor: "#FFC107",
    textColor: "black"
}).showToast();

示例3：显示自定义图标和回调函数

Toastify({
    text: "点击我试试看！",
    duration: 3000,
    close: true,
    gravity: "bottom", // 底部显示
    positionLeft: true, // 靠左显示
    backgroundColor: "#FBC02D",
    textColor: "black",
    icon: "fas fa-heart", // 自定义图标
    onClicked: function() {
        alert("点击了通知消息！");
    }
}).showToast();