SweetAlert - Javascript

SweetAlert是一个用于替代JavaScript默认的alert，confirm和prompt对话框的弹出窗口库，并且它是可以自定义的，让弹窗变得美观而且富有动感。

特性

• 完美替代JavaScript默认的对话框。
• 多种类型的弹窗：success、error、warning、info等。
• 自定义标题、内容、按钮文本、图标等。
• 可以自定义动画效果。
• 包含回调函数，让代码更易读易维护。
• 轻量级，下载速度快，文件大小小。

安装

SweetAlert可以在浏览器和Node.js中使用。你可以从CDN或者npm下载：

从CDN引用

<script src="https://cdn.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.css">

从npm中安装

npm install sweetalert

使用

SweetAlert使用起来很简单。只需几行代码你就可以快速创建一个漂亮的弹窗。

swal("Hello world!");

创建一个带有自定义文本和按钮的弹窗，当点击按钮时将会调用一个回调函数：

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

更多使用示例，请移步项目 官方网站 查看。

常用方法

swal({/*options*/}); // 显示一个弹窗

swal.close(); // 手动关闭弹窗

效果预览

普通提示

成功提示

错误提示

自定义图标

自定义按钮

自定义动画