alert()可直接弹窗但会阻塞JS、无法自定义样式且不支持HTML，仅适合调试；confirm()和prompt()同样阻塞主线程且prompt()在Chrome 95+已被禁用，现代开发应改用<dialog>或sweetalert2等非阻塞方案。
怎么用 alert() 弹出最简提示框
直接调用浏览器原生的 alert() 就能弹窗，但它会阻塞 JS 执行、无法自定义样式、不支持 HTML 内容，纯调试或临时提醒可用。
- 写法就是
alert("内容")，参数必须是字符串，传对象或数组会自动转成[object Object]或1,2,3 - 在现代页面里别用它做用户交互，比如表单提交成功后弹一下——用户点确定前整个页面卡死，体验差
- 移动端 Safari 对
alert()有更严格的拦截策略，某些 iframe 或异步上下文中可能静默失败，连错误都不报
为什么 confirm() 和 prompt() 基本该淘汰了
这两个函数同样阻塞主线程，且 prompt() 在 Chrome 95+ 已被禁用（控制台报 Blocked autofocusing on a form control in a cross-origin subframe），Firefox 和 Safari 也逐步限制。
-
confirm()返回布尔值，但用户没点确定/取消前 JS 完全停住，没法加 loading 状态或防重复点击 -
prompt()输入框不可样式化，移动端键盘唤起逻辑混乱，且很多安全策略下直接返回null - 替代方案不是“不用”，而是用
modal元素 +dialogAPI 或轻量库（如sweetalert2），它们不阻塞线程，可绑定事件、加动画、适配响应式
用 <dialog> 实现非阻塞提示框（现代标准）
<dialog> 是原生 HTML 元素，兼容性已覆盖 Chrome 37+/Edge 79+/Firefox 98+，Safari 15.4+ 支持完整 API，适合简单定制场景。
- 必须配合 JS 控制显隐：
document.getElementById("myDialog").showModal()才真正弹出，close()关闭 - 点击遮罩层默认不关闭，要手动监听
click事件判断是否点在 backdrop 上（event.target === dialog） - 不设
width或max-width时，Chrome 下 dialog 会撑满视口宽度，Firefox 表现不同，建议显式设置max-width: 90vw - 示例结构：
<dialog id="tip"> <p>操作已保存</p> <button onclick="this.closest('dialog').close()">确定</button> </dialog>
遇到 Failed to execute 'showModal' on 'HTMLDialogElement' 怎么办
这个错误只在两种情况出现：元素不在 DOM 树中，或调用时不在用户手势触发的上下文里（比如 setTimeout 里直接调）。
立即学习“前端免费学习笔记（深入）”；
- 检查
dialog是否已插入文档：document.body.appendChild(dialog)不能漏 - 如果从异步操作（如 fetch 回调）里调
showModal()，确保上层有用户点击/按键等事件触发链，否则加个setTimeout(() => dialog.showModal(), 0)拖到下一个宏任务（仅临时绕过，非根本解） - Safari 15.4 之前不支持
showModal()，要用show()替代，但后者无遮罩层，需自己加<div class="backdrop">
真要兼容老浏览器或需要复杂交互（输入校验、多步骤、主题切换），别硬刚原生 API，直接上 sweetalert2 或封装一个基于 div + aria-modal 的轻量组件更省事。原生 dialog 好用的前提是你清楚它的边界在哪——它不是万能弹窗，只是个语义化容器。
