应避免在正式页面使用 alert()，因其阻塞执行、样式不可定制、移动端体验差；推荐用自定义 div 弹窗或 HTML5 dialog 标签，并注意 DOM 加载时机、样式控制及异步内容加载顺序。
用 alert() 快速弹出提示框，但别在正式页面里用
浏览器原生的 alert() 确实能立刻弹窗，但它会阻塞 JS 执行、无法自定义样式、移动端体验极差，而且现代浏览器对连续调用会静默丢弃或合并。只适合调试时临时打个招呼。
常见错误现象：alert() 在循环里连用三次，结果只弹一次；或者在 AJAX 回调里调用，用户点完确定后页面已跳转，白弹。
- 别把它当 UI 组件用——它不是“弹窗”，是“中断对话”
- 如果只是想告诉用户“保存成功”，优先改用页面内提示（比如顶部 toast）
- 真要弹，且必须阻塞流程（例如表单强校验未通过），才考虑它
自己写一个轻量弹窗，用 div + display 控制显隐
不用框架也能做可用的弹窗：核心是用一个带 position: fixed 的 div 覆盖页面，再用 JS 切换它的 display 或 visibility。
关键点在于遮罩层必须比内容层 z-index 低，且要处理 Esc 关闭和点击遮罩关闭：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层加
background: rgba(0,0,0,0.5)，别用纯黑+opacity，否则内部元素也会变透明 - 弹窗内容区设
z-index: 1001，遮罩设z-index: 1000，避免被其他组件（如导航栏）盖住 - 绑定
keydown监听Escape键时，记得用e.key === 'Escape'，不是e.code - 点击遮罩关闭时，确保事件目标是遮罩本身，而不是里面的内容（用
e.target === maskEl判断）
示例结构：
<div id="modal-mask" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
<div id="modal-box" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:20px; z-index:1001;">
<p>这是弹窗内容</p>
<button onclick="closeModal()">关闭</button>
</div>
</div>
用 showModal() 和 <dialog> 标签，但注意兼容性
<dialog> 是 HTML5 原生弹窗标签，配合 showModal() 方法能实现模态行为（禁用背景交互、自动居中、支持 Esc 关闭），语义清晰、代码干净。
但它在 Safari 上直到 iOS 16.4 / macOS 13.3 才完全支持 showModal()，旧版本只能用 show()（非模态，背景仍可操作）。
- 检测是否支持：
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 不支持时，降级方案别直接删掉
<dialog>，而是用 JS 补上定位和遮罩逻辑 -
<dialog>默认无样式，必须手动加border、padding、background，否则 Safari 下可能看不见 - 关闭后记得调用
close()，否则再次showModal()可能不触发重绘
点击按钮后弹窗没反应？先查这三件事
弹窗写完跑不起来，90% 是卡在这几个地方：
- JS 代码放在
<head>里，但 DOM 还没加载完，document.getElementById()拿不到元素 → 改成DOMContentLoaded事件里执行，或把 script 放在 body 底部 - CSS 中给弹窗容器写了
display: none，但 JS 里只改了visibility: hidden→ 显示时得同时改回display: block - 用了
event.preventDefault()在按钮上，但忘了在弹窗关闭按钮里也加，导致点击后页面跳转或刷新 → 关闭按钮的 click 事件也要e.preventDefault()
复杂点在于：弹窗常要异步加载内容（比如从 API 取数据），这时候显示弹窗和渲染内容不能混为一谈——先 show，再 fetch，成功后再填内容；否则用户看到空框或 loading 卡住，体验断层。
