SweetAlert JS

SweetAlert JS是一款强大的Javascript模态框插件，能够优雅地替代浏览器默认的弹窗提示框。

特性

• 移动友好，自适应屏幕大小
• 可自定义风格，提供多种主题样式
• 简单易用，能够快速实现各种提示效果
• 支持Promise API，可用于异步操作

使用方法

首先，我们需要在网页中引入SweetAlert js文件：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

基本用法

我们可以通过调用SweetAlert的全局函数来显示模态框：

Swal.fire('Hello, World!');

这会弹出一个包含"Hello, World!"的提示框。

更多内容，请打开官方文档学习。

代码片段

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

// 基本使用
Swal.fire('Hello, World!');

// 各种风格的提示框
Swal.fire({
  icon: 'success',
  title: '操作成功',
  text: '您已成功提交了表单。'
});

Swal.fire({
  icon: 'info',
  title: '提示信息',
  html: '<strong>请注意：</strong>您的余额不足。',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: '充值',
  cancelButtonText: '取消'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      icon: 'success',
      title: '充值成功',
      text: '您的账户余额已经充值成功。'
    });
  }
});

Swal.fire({
  icon: 'error',
  title: '错误',
  text: '访问被拒绝，请与管理员联系。'
});

Swal.fire({
  icon: 'warning',
  title: '警告',
  text: '该操作不可逆，是否继续？',
  showCancelButton: true,
  confirmButtonText: '确定',
  cancelButtonText: '取消'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      icon: 'success',
      title: '删除成功',
      text: '您选择的数据已经删除成功。'
    });
  }
});

// 自定义图标和颜色
Swal.fire({
  title: 'Custom icon and color',
  imageUrl: 'https://via.placeholder.com/150',
  imageHeight: 150,
  confirmButtonColor: '#2ecc71'
});

// 生成一个等待提示框
Swal.fire({
  title: '等待中',
  text: '正在处理中，请稍等...',
  allowOutsideClick: false,
  didOpen: () => {
    Swal.showLoading();
  }
});

// 用Promise实现异步操作
Swal.fire({
  title: '您确定要提交吗？',
  showCancelButton: true,
  confirmButtonText: '确定',
  cancelButtonText: '取消'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('提交成功！');
  } else {
    Swal.fire('已取消。');
  }
});