原生对话框（alert/confirm/prompt）虽零依赖但阻塞主线程、无样式定制且兼容性差，现代项目应优先使用语义化可定制的元素或轻量封装方案。
用 alert()、confirm()、prompt() 创建原生对话框
浏览器原生支持三种阻塞式对话框，不需要引入任何库，但它们会暂停 JS 执行、打断用户操作流，现代项目中应谨慎使用。
常见错误现象：在 Vue/React 组件里频繁调用 alert() 调试，结果点击后页面卡住、事件监听器失效；或在异步回调（如 fetch.then()）里用 prompt()，发现输入框一闪而过——因为页面可能已跳转或组件已卸载。
-
alert()只显示消息，无返回值（实际返回undefined），适合紧急提示，但无法用于流程控制 -
confirm()返回布尔值：true表示点“确定”，false表示点“取消”或按 Esc -
prompt()返回用户输入的字符串，如果点取消或关闭，返回null（不是空字符串！） - 三者均不支持自定义样式、按钮文字或键盘快捷键，且在 iOS Safari 中可能被静默拦截（尤其非用户手势触发时）
为什么 showModalDialog() 不能用了
旧版 IE 提供的 showModalDialog() 曾用于模态子窗口，但已被所有现代浏览器废弃，Chrome 46+ 直接移除，调用时抛出 TypeError: showModelessDialog is not a function 或类似错误。
它被弃用的核心原因是：阻塞主线程、破坏标签页独立性、与 Promise/async-await 模型冲突。现在连 polyfill 都不可靠——模拟不了真正的模态行为，反而引发 focus 管理、键盘导航（Tab/Shift+Tab）、屏幕阅读器兼容等问题。
立即学习“前端免费学习笔记（深入）”；
- 别试图用
window.open()+window.focus()模拟，无法阻止用户切到其他标签页 - 服务端渲染（SSR）或静态站点中调用这些函数，会直接报错：
ReferenceError: alert is not defined（Node.js 环境无 DOM） - 若必须兼容极老系统，只能降级为内联
<dialog></dialog>+ 手动管理open属性和 backdrop
用 <dialog></dialog> 元素替代原生对话框
<dialog></dialog> 是 HTML5 原生模态容器，语义清晰、可样式化、支持 showModal() 和 close() 方法，但需注意浏览器兼容性（IE 完全不支持，Safari 9.1+ 支持，移动端需检查）。
典型错误：直接写 <dialog>内容</dialog> 却没调用 showModal()，导致元素渲染但无遮罩、无焦点锁定；或忘记监听 close 事件清理状态。
- 必须用 JavaScript 触发显示：
document.getElementById('myDialog').showModal() - 点击 backdrop 关闭时触发
close事件，但不会触发click事件——别在 backdrop 上绑onclick - 默认无样式，需至少设置
dialog { border: 1px solid #ccc; padding: 1em; }，否则 Safari 下可能看不见边框 - 不支持嵌套
<dialog></dialog>，第二次showModal()会关闭前一个
真实项目中该选哪个
没有银弹。原生函数快、零依赖，但体验僵硬；<dialog></dialog> 更可控，但要处理 polyfill 和焦点管理；第三方库（如 SweetAlert2）功能强，却增加包体积和维护成本。
容易被忽略的点：键盘交互。原生 confirm() 支持空格/Enter 确认、Esc 取消；<dialog></dialog> 必须手动实现 keydown 监听，否则盲人用户或键盘党无法操作。
- 内部工具、后台管理页调试阶段：用
alert()快速验证逻辑，上线前删掉 - 用户关键操作确认（如删除数据）：优先用
<dialog></dialog>+ 自定义按钮，确保Escape和Enter键可用 - 表单字段即时校验提示：别用任何模态框，改用内联错误文案或 tooltip
- 需要跨框架复用？封装一个轻量 hook（React）或 composable（Vue），而不是全局挂载
alert
