B Bootstrap组件实验室
返回目录首页

SweetAlert2 sweetalert2 11.26.25

SweetAlert2 是高颜值、可高度定制的弹窗库，一行 Swal.fire() 即可替代原生 alert / confirm / prompt。本页基于 Bootstrap 5.3.8 演示。

官方对照（vs 官方 Modal）

Bootstrap 官方提供固定结构的 Modal 组件，适合嵌入复杂内容；SweetAlert2 用一行 JS 调用生成弹窗，更适合替代浏览器原生弹窗。

官方已有 官方已有 Modal 弹窗组件，本库是其轻量替代方案

对比维度Bootstrap 官方 ModalSweetAlert2
能力定位结构化弹层容器，需手写 HTML 模板一行 JS 调用生成弹窗，替代原生 alert/confirm/prompt
核心特性居中弹层、大小档、远端内容、垂直居中图标、输入框、确认/取消按钮、Promise 结果、定时器与队列
依赖与体积bootstrap bundle 已含，无额外体积单个 dist 文件约 200KB 未压缩，无任何依赖
样式定制Modal 类与 Sass 变量background、customClass、按钮色等配置项 + CSS 覆盖
适用场景复杂表单、长内容、嵌入其他组件的弹层消息提示、确认框、快速表单输入

引入方式

通过 jsDelivr 固定版本引入单文件 sweetalert2.all.min.js：无需额外 CSS、无任何依赖（不依赖 jQuery），加载后全局暴露 Swal。本页固定 11.26.25。

引入代码 
<!-- SweetAlert2 单文件（含 CSS，无依赖） -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.26.25/dist/sweetalert2.all.min.js"></script>

基础弹窗

调用 Swal.fire({...}) 即可弹出带图标的提示框。

HTML 示例 
<button type="button" id="btnSwalBasic">弹出欢迎弹窗</button>

<script>
document.getElementById('btnSwalBasic').addEventListener('click', function () {
  Swal.fire({
    title: '你好！',
    text: '这是一个 SweetAlert2 弹窗',
    icon: 'success',
    confirmButtonText: '好的'
  });
});
</script>

确认框

加 showCancelButton: true 成为确认框；.then(result => ...) 中通过 result.isConfirmed 拿到用户的真实选择，并把结果展示在下方。

尚未操作：点击按钮弹出确认框，你的选择会显示在这里。

HTML 示例 
<button type="button" id="btnSwalConfirm">删除一条记录</button>
<p id="confirmResult"></p>

<script>
document.getElementById('btnSwalConfirm').addEventListener('click', function () {
  Swal.fire({
    title: '确认删除这条记录？',
    text: '删除后不可恢复',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: '删除',
    cancelButtonText: '取消'
  }).then(function (result) {
    if (result.isConfirmed) {
      document.getElementById('confirmResult').textContent =
        '你点击了「删除」，记录已删除';
      Swal.fire('已删除', '', 'success');
    } else {
      document.getElementById('confirmResult').textContent =
        '你点击了「取消」，操作已取消';
    }
  });
});
</script>

表单弹窗

配置 input: 'text' 即成为输入弹窗，result.value 是用户输入的内容；inputValidator 可做必填校验。

尚未操作：输入昵称后结果会显示在这里。

HTML 示例 
<button type="button" id="btnSwalForm">填写昵称</button>
<p id="formResult"></p>

<script>
document.getElementById('btnSwalForm').addEventListener('click', function () {
  Swal.fire({
    title: '请输入昵称',
    input: 'text',
    inputPlaceholder: '例如：豆豆',
    showCancelButton: true,
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    inputValidator: function (value) {
      if (!value.trim()) return '昵称不能为空';
    }
  }).then(function (result) {
    if (result.isConfirmed) {
      document.getElementById('formResult').textContent =
        '保存成功，昵称：' + result.value;
    }
  });
});
</script>