前端开发信息提示框库SweetAlert

空竹 · 发表于 2023-7-30 12:33:25

本帖最后由空竹于 2023-8-2 09:41 编辑

SweetAlert 是一个功能强大且灵活的 JavaScript 弹窗库，可以替代传统的浏览器原生弹窗，提供更漂亮、交互性更强的弹窗效果。

以下是 SweetAlert 的基本用法示例：

1. 引入 SweetAlert 文件：在 HTML 文件的 <head> 部分引入 SweetAlert 的 CSS 和 JavaScript 文件。
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">
</head>
<body>

2. 触发弹窗：使用 SweetAlert 提供的函数来触发弹窗。最简单的方式是使用 Swal.fire() 方法。
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.all.min.js"></script>
<script>
Swal.fire("Hello, SweetAlert!");
</script>

3. 自定义弹窗：SweetAlert 提供了许多配置选项，可以自定义弹窗的外观和行为。
<script>
Swal.fire({
  title: "提示",
  text: "确认删除该项？",
  icon: "warning",
  showCancelButton: true,
  confirmButtonText: "删除",
  cancelButtonText: "取消",
  reverseButtons: true
})
  .then((result) => {
if (result.isConfirmed) {
   Swal.fire("已删除！", "该项已成功删除。", "success");
} else if (result.dismiss === Swal.DismissReason.cancel) {
   Swal.fire("已取消", "取消删除操作。", "info");
}
});
</script>

在上面的示例中，我们通过设置对象参数来自定义弹窗的内容、图标、按钮文字等。使用 .then() 方法可以处理用户的操作结果，根据不同的结果进行相应的处理。

通过 SweetAlert，你可以创建各种类型的弹窗，包括确认对话框、警告框、错误提示等，并且可以根据业务需求对弹窗进行个性化的样式、文本和行为设置。

上述示例只是 SweetAlert 的简单用法，在实际使用中，你可以参考 SweetAlert 提供的文档和示例来深入了解更多高级用法和定制选项。

515667395 · 发表于 2024-4-27 19:58:11

多谢分享

pxianwei · 发表于 2024-1-4 23:14:10

#在这里快速回复#谢谢分享

qqmqqg · 发表于 2023-8-2 07:58:21

感谢发布原创作品，精易因你更精彩

alanwoo · 发表于 2023-8-1 20:14:42

感谢分享

空竹 · 发表于 2023-8-1 17:03:55

@紫旭这个库胜在简洁吧，我偶尔用E2EE的时候，写前端基本都是单页面的，用起来还不错。

crossdiy · 发表于 2023-8-1 15:01:25

感谢分享

ax5038 · 发表于 2023-8-1 11:18:56

支持开源~！感谢分享

396384183 · 发表于 2023-8-1 09:29:03

感谢分享

亿万 · 发表于 2023-7-31 21:41:17

支持开源~！感谢分享

		自动登录	找回密码
密码			注册

[Web源码] 前端开发信息提示框库SweetAlert

点评