SweetAlert

什么是 SweetAlert？

SweetAlert 是一种用于自定义应用程序、网站和游戏中的提示框的方法。它允许用户通过标准的 JavaScript 按钮进行更改。您可以向其中添加新按钮，更改按钮的背景颜色，更改按钮的文本，并添加取决于用户点击的附加提示。您还可以在其中包含图标和提示消息。

SweetAlert 是 JavaScript 的 "window.alert()" 函数的替代品，它可以显示精美的模态弹出窗口。它是一个独立的库，没有任何依赖项，由一个 JavaScript 文件和一个 CSS 文件组成。

安装 SweetAlert

NPM 是安装 SweetAlert 的推荐方法，通常与 BrowserWise 或 Webpack 等工具结合使用。

然后，只需将其导入到您的项目和应用程序中。

您还可以获取最新版本的库的 CDN 链接，并通过脚本标签将其包含在您的网页中。

除了 JavaScript 文件，您还必须加载一个 CSS 文件，该文件用于设计库创建的所有提示框。

设置好库后，创建 SweetAlert 消息非常简单。您只需调用 swal() 函数即可。

SweetAlert 示例

基本示例

1. 简单的消息提示

2. 如果将两个参数传递给 swal() 函数，第一个将是模态框的标题，第二个是模态框的文本，如下所示：

错误和成功消息

自定义确认按钮

您可以选择很多选项来配置您的提示框代码。例如，您可以更改确认按钮上的文本。

带有已附加到“确认”按钮和“取消”按钮的函数的提示消息。

带有自定义图标的提示消息。

替换“prompt”函数

带有加载器 gif 按钮的 swal() 函数（用于 AJAX 请求）

使用 React

使用 JSX 语法时，如果您正在使用 SweetAlert，您将需要安装 React。

之后，导入 SweetAlert 非常容易。

JSX 语法改变了模态框的内容选项，因此您仍然可以使用 SweetAlert 的其他功能。