最快弹窗用 window.alert()，但仅限调试；正式环境推荐 dialog 元素（Chrome 97+/Firefox 99+/Safari 15.4+）或手写 modal；需处理焦点管理、ESC 关闭、遮罩层交互及移动端适配。
用 window.alert() 最快弹出提示，但别在正式逻辑里依赖它
它确实能立刻弹窗，但阻塞 JS 执行、无法定制样式、移动端体验差，纯调试或临时验证可用。
- 调用后页面完全冻结，用户必须点确定才能继续，
fetch或表单提交会被卡住 -
window.alert("加载失败")和alert("加载失败")效果一样，不加window.也行，但显式写上更清晰 - 传入非字符串值（比如
undefined、对象）会自动转成字符串，alert({a:1})显示[object Object]，不是调试好选择
想控制弹窗位置和样式？用 dialog 元素 + showModal()
原生语义化弹窗，支持 backdrop、焦点锁定、ESC 关闭，现代浏览器基本都支持（Chrome 97+、Firefox 99+、Safari 15.4+）。
- HTML 必须写成
<dialog><p>内容</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></dialog>，不能用div模拟，否则showModal()无效 - 首次显示前需先调用
dialogEl.showModal()，直接display: block不起作用 - 关闭时推荐用
dialogEl.close()，而不是dialogEl.remove()—— 后者会销毁元素，下次再调用showModal()会报错Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document. - CSS 中
dialog::backdrop可设遮罩层样式，但 Safari 目前不支持自定义颜色，只能改透明度
兼容老浏览器？自己封装一个 modal div + position: fixed
IE11 或需要支持 Safari 15.3 以下时，dialog 不可用，得手写。核心是三层结构：遮罩层（overlay）、弹窗容器（modal）、内容区（modal-content）。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层必须设
z-index高于页面其他内容，但低于弹窗本身；弹窗再设更高z-index，否则点不到按钮 - 按 ESC 关闭要监听
keydown，且检查event.key === "Escape"，别用keyCode（已废弃） - 点击遮罩层关闭时，确保
event.target === overlayEl，而不是event.currentTarget，否则点到弹窗内部也会关掉 - 移动端记得加
touch-action: none到遮罩层，避免 iOS 上滑动误触发页面滚动
弹窗里放表单或输入框？焦点和键盘行为容易出问题
用户点进弹窗后按 Tab 键跳不出去、回车没反应、输入法切换异常——这些不是 bug，是没处理焦点管理。
- 弹窗打开后立即
focus()到第一个可聚焦元素（如input或带tabindex="0"的按钮），否则键盘操作无响应 - 实现焦点循环：Tab 到最后一个元素时，下一个 Tab 回到第一个；Shift+Tab 到第一个时，上一个回到最后一个 —— 否则用户可能把焦点“丢”到页面背后
- 表单内回车默认触发表单提交，如果弹窗只是确认操作，记得给
form加onsubmit="return false;"或监听并preventDefault() - 某些安卓 WebView 中，弹窗内
input[type="text"]聚焦后软键盘顶起页面，导致弹窗偏移 —— 此时不要依赖position: fixed垂直居中，改用transform: translate(-50%, -50%)更稳
