原生 confirm() 因阻塞执行、仅返回布尔值、不支持自定义按钮/传参/无障碍等，无法满足现代交互需求；推荐用 <dialog> 元素手动实现可编程确认框，或按兼容性选用 tiny-confirm、SweetAlert2 等轻量方案。
HTML 原生 alert()、confirm()、prompt() 确实不支持自定义样式、不能嵌入 HTML 内容、无法绑定事件、在移动端体验差——这不是你用错了，是它们设计上就只做简单提示。
为什么 confirm() 不能满足现代交互需求
它会阻塞 JS 执行（页面冻结），返回值只有 true/false，没法传参、没法加按钮文字、没法加图标或输入框。遇到“确定删除并同步到云端”这种复合操作时，confirm() 直接失效。
- 点击确认后无法知道用户点了哪个按钮（只有“确定”“取消”，没 ID 或 data 属性）
- 无法阻止默认行为（比如表单提交后才弹窗，但用户点“取消”时表单已发出去了）
- 在 iOS Safari 中可能被拦截，尤其非用户手势触发时
- 无法获取焦点控制，对键盘导航和无障碍不友好
用 dialog 元素实现可编程确认框
<dialog> 是原生、语义化、可聚焦、支持 showModal() 的方案，兼容 Chrome 97+、Firefox 98+、Safari 15.4+。关键是要手动处理按钮逻辑，而不是依赖返回值。
<dialog id="delete-dialog">
<p>确定要删除这条记录吗？</p>
<button id="confirm-delete">确认删除</button>
<button id="cancel-delete">取消</button>
</dialog>
<script>
const dialog = document.getElementById('delete-dialog');
document.getElementById('trigger-btn').onclick = () => dialog.showModal();
document.getElementById('confirm-delete').onclick = () => {
// 这里执行真实删除逻辑
console.log('执行删除');
dialog.close('confirmed'); // 可传字符串作为关闭理由
};
document.getElementById('cancel-delete').onclick = () => dialog.close('canceled');
</script>
-
dialog.close()不返回布尔值，需监听close事件读取dialog.returnValue - 必须用用户手势（如 click）触发
showModal()，否则会被浏览器拒绝 - 记得加
role="alertdialog"和aria-labelledby提升可访问性
兼容老浏览器时该选哪个轻量库
如果要支持 IE 或旧版 Android WebView，别自己封装 Promise 化 confirm()，直接用 swal()（SweetAlert2）或 showModalDialog() 的 polyfill 都不可靠。推荐：
立即学习“前端免费学习笔记（深入）”；
- 只替换确认流：用
tiny-confirm（仅 1.2KB，无依赖，返回 Promise） - 需要表单/多步骤：用
@sweetalert2/react（React 场景下更可控） - 已有 Bootstrap：优先用
bootstrap modal+ 手动管理状态，避免额外依赖 - 注意：
swal()默认禁用按 Esc 关闭，需显式设allowEscapeKey: true
真正难的不是弹出一个框，而是把“用户点了什么”“当时上下文是什么”“后续动作是否已撤销”这三件事串成可追溯的链路。原生 confirm() 把前两步都砍掉了，剩下的只能靠你自己补全。
