SweetAlert2 是一款面向网页前端的 JavaScript 弹窗提示库，用于替换浏览器原生的 alert()、confirm() 等对话框，提供样式统一、可定制且支持无障碍访问的模态窗口。[1] 它于 2015 年 1 月首次发布，采用 MIT 许可证，由 Limon Monte 发起并维护，不依赖任何第三方运行时依赖。[1] 库通过 Swal.fire() 方法调用，以 Promise 形式返回用户的选择结果。[2]
定义
SweetAlert2 是一个在浏览器端运行的弹窗提示库，其定位是 JavaScript 原生弹窗框的替代实现，官方描述为响应式、可定制、无障碍(WAI-ARIA)的替代方案，且不含任何运行时依赖。[2] 它把弹窗封装成一个可配置对象，标题、正文、按钮文字、图标、宽度、位置等都以参数形式传入，从而绕开原生对话框无法改变外观的限制。[3]
它内置 5 种图标类型，分别为 success、error、warning、info 和 question，每种会播放对应的图标动画。[3] 库同时提供 setDefaults、close、queue 等实例方法，可统一设置默认参数或按顺序连续弹出多个窗口。[3]
原理
该库在页面中动态创建一组 DOM 元素来构成遮罩层与对话框容器，并配合自带的样式表控制外观，而不是调用浏览器内建的弹窗接口。[2] 调用时把配置对象交给 Swal.fire()，库据此渲染内容、绑定按钮事件，并返回一个 Promise；用户点击确认、取消、关闭按钮，或按下 Esc 键、点击遮罩、等待计时器结束而关闭时，该 Promise 会以对应的结果状态兑现或拒绝，代码可据此分支处理。[3]
配置项中允许通过 html 参数插入自定义标记，也可用 text 参数提供纯文本；当两者同时给出时以 text 为准，这一设计用于降低外部内容注入的风险。[3] 输入框类型覆盖 text、email、password、number、tel、range、textarea、select、radio、checkbox、file 等，配合 inputValidator 可以在提交前对用户输入做校验。[3] 交互状态可用如下关系概括：
flowchart LR
A[调用 Swal.fire 传入配置] --> B[创建遮罩与对话框 DOM]
B --> C[渲染标题 正文 图标 按钮]
C --> D{用户操作}
D -->|确认| E[Promise 兑现 返回 isConfirmed]
D -->|取消 关闭 Esc 点击遮罩 计时结束| F[Promise 返回 dismiss 原因]
无障碍方面，库为按钮和关闭控件提供 aria-label 属性，并记录 WAI-ARIA 相关实践，使对话框能被辅助技术识别。[3]
发展历程
SweetAlert2 的前身是 t4t5 开发的 SweetAlert。由于原项目长期无人维护，2014 年 11 月之后不再合并新的改动，Limon Monte 在其基础上另行创建了 SweetAlert2 项目。[4] 2015 年 1 月 8 日，作者在开发者社区说明新项目增加了模态窗口内嵌 HTML、自定义宽度与内边距等选项。[5]
该项目以 MIT 许可证发布，首个版本出现在 2015 年 1 月。[1] 据作者 2019 年的回顾，当时其流行度已达到原项目 SweetAlert 的两倍，原因在于持续维护并采纳社区反馈。[1] 到 2025 年，项目已持续维护十年。[6]
版本迭代中，第 7 版引入了 toast 通知、position 定位等参数，第 11 版继续调整 API 并更新对 TypeScript 的支持。[7] 截至 2026 年 5 月的统计，该包已发布 780 余个版本，近一年的周下载量约为 99.9 万次，代码仓库获得约 1.81 万次收藏。[8]
应用
在前端开发中，该库常用于删除、提交、退出等操作前的二次确认，也用于表单校验提示、操作成功或失败的反馈，以及需要用户输入信息的场景。[9] 典型做法是在表单的 submit 事件中阻止默认提交，先弹出对话框，待用户确认后再执行后续提交逻辑。[10]
该库可通过包管理器安装，也可直接引入打包好的脚本与样式文件使用，并兼容 ES6 模块与 CommonJS 两种引入方式。[2] 围绕它形成了若干框架集成包，如面向 Angular 的 ngx-sweetalert2、面向 React 的 sweetalert2-react-content，以及社区维护的 Vue.js 封装。[1]
局限
该库主要面向现代浏览器，官方明确表示不支持 IE10 及更低版本；在旧版 IE 或部分移动浏览器中若需兼容，必须额外引入 ES6 Promise 的垫片(polyfill)。[3] 当前版本的兼容性说明只列出 Chrome、Firefox、Safari、Edge 等主流浏览器，需要支持 IE11 与旧版 Edge 时须退回较早的大版本。[2]
由于对话框是在页面内自行渲染的 DOM 结构，其行为受页面自身样式与脚本环境影响，若站点已有自定义 CSS 或存在多个同类组件，可能出现样式覆盖或层级冲突。[3] 库允许通过 html 参数插入自定义标记，开发者需要自行保证所插入内容的来源可信，否则会把外部内容引入页面。[3]
此外，该项目曾因在特定域名区域执行与代码功能无关的行为而被开源安全数据库收录为 protestware 类条目，并被列入 GitHub 安全公告库；相关行为在软件说明中公布，而未写入源代码的许可证条款中。
参见
-
JavaScript —— 本库所依托的编程语言，弹窗逻辑以脚本形式在浏览器中执行。
-
Promise —— 调用弹窗后返回结果并处理用户选择的异步机制。
-
TypeScript —— 该库自带类型声明文件，可直接在类型化项目中使用。
-
DOM —— 库通过动态创建文档对象模型节点来生成对话框界面。
-
npm —— 该库主要的分发渠道与包管理平台。
-
WAI-ARIA —— 库在无障碍方面参照的辅助技术规范。
参考资料
- Sweetalert2 - Mend’s Open Source Project For January 2019 [引用日期2026-10-14]
- sweetalert2 [引用日期2026-10-14]
- SweetAlert2 [引用日期2026-10-14]
- What's the difference between sweetalert and sweetalert2? [引用日期2026-10-14]
- sitepoint.com 上的网页 [引用日期2026-10-14]
- github.com 上的网页 [引用日期2026-10-14]
- README [引用日期2026-10-14]
- sweetalert2 | Snyk [引用日期2026-10-14]
- SweetAlert 2按钮取消提交表单 [引用日期2026-10-14]
- 使用SweetAlert2提交表单确认 [引用日期2026-10-14]