原生 alert() 无法实现确认/取消双按钮，必须用 dialog 元素或 DOM 模拟；confirm() 虽支持双按钮但不可定制样式与逻辑；现代推荐使用 配合 data-action 和焦点管理，兼顾语义、可控性与可访问性。
原生 alert() 无法添加确认按键，必须换方案
浏览器内置的 alert() 只有一个“确定”按钮，且不可定制、不可编程控制关闭逻辑，连按钮文字都改不了。想实现“确认/取消”双按钮，必须放弃它——这不是配置问题，是能力边界问题。
实际开发中，99% 的所谓“自定义弹窗”都是用 DOM 模拟的，不是原生对话框。别被“弹窗”这个词带偏，重点在“可控交互”，不在“长得像系统提示”。
confirm() 是最简双按钮替代，但样式和逻辑受限
confirm() 确实提供“确定/取消”两个按钮，返回布尔值，适合快速验证操作意愿。但它依然无法改文案、无法加图标、无法阻止默认行为（比如点了“取消”还想执行部分清理逻辑）。
- 调用后页面会阻塞，用户不能切换标签页或操作其他元素
- Chrome 92+ 起，连续多次调用可能被静默拦截（尤其自动触发时）
- 移动端显示位置不固定，部分安卓 WebView 会截断按钮文字
- 示例：
if (confirm("确定要删除这条记录？")) { doDelete(); } else { console.log("用户点了取消"); }
真多按钮弹窗：用 dialog 元素 + 手动绑定事件
现代方案首选 HTML5 dialog，语义清晰、可聚焦、支持 showModal() 和 close()，按钮完全由你控制。
- 必须显式调用
showModal()才显示，不会意外弹出 - 每个按钮用
type="button"避免表单默认提交；用data-action区分行为，比写多个onclick更易维护 - 点击遮罩层（
dialog::backdrop）默认不关闭，需手动监听click并检查event.target === dialog - 示例结构：
<dialog id="confirmDialog"><p>操作不可逆，确认继续？</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="overflowclass">DeepBI DHTML 页面生成器</a> <p class="overflowclass">生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button data-action="confirm">确认</button> <button data-action="cancel">取消</button> </dialog>
然后用 JS 绑定：const dialog = document.getElementById('confirmDialog'); dialog.querySelector('[data-action="confirm"]').onclick = () => { doAction(); dialog.close(); }; dialog.querySelector('[data-action="cancel"]').onclick = () => { dialog.close(); };
兼容性兜底与焦点管理容易被忽略
dialog 在 Safari 15.4+、Firefox 98+、Chrome 37+ 支持良好，但旧版 Safari 和 IE 完全不支持。如果必须兼容，可用 div + aria-modal="true" 模拟，但得自己处理焦点锁（inert 或手动 tabindex 控制）和 ESC 关闭。
更关键的是：弹窗打开后，键盘 Tab 应只在弹窗内循环，且首次聚焦要落在第一个可交互元素（通常是主操作按钮）。漏掉这点，对屏幕阅读器用户和键盘党就是障碍。
别只测试鼠标点击——按 ESC、Tab、Shift+Tab、回车，都得有明确响应。否则“多按钮”只是视觉假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
