alert()可直接弹窗但会阻塞js、无法自定义样式且不支持html，仅适合调试；confirm()和prompt()同样阻塞主线程且prompt()在chrome 95+已被禁用，现代开发应改用或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> 实现非阻塞提示框（现代标准）
<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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/872" title="Napkin AI"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679986368475.png" alt="Napkin AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/872" title="Napkin AI">Napkin AI</a> <p>Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。</p> </div> <a href="/ai/872" title="Napkin AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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"> <p>真要兼容老浏览器或需要复杂交互（输入校验、多步骤、主题切换），别硬刚原生 API，直接上 <code>sweetalert2或封装一个基于div+aria-modal的轻量组件更省事。原生dialog好用的前提是你清楚它的边界在哪——它不是万能弹窗，只是个语义化容器。
