原生html不支持弹窗，需javascript触发；alert()调试快但体验差、阻塞交互、不可定制；dialog元素是现代标准方案，需注意兼容性（chrome97+/firefox/safari15.4+）、手动控制显示/关闭、处理滚动与焦点问题。
原生 HTML 本身不支持弹窗提示，必须靠 JavaScript 触发；直接写 alert() 最快但体验差，用 dialog 元素是现代标准方案，但需注意浏览器兼容性。
用 alert() 快速调试，但别用在正式页面
这是最简单的“弹窗”——其实是浏览器级阻塞式提示框，用户必须点确定才能继续操作，会打断交互流程。
- 适合开发时临时验证逻辑，比如
alert("用户名不能为空") - 不能自定义样式、不能加按钮、不能含 HTML 内容
- 在移动端上常被系统拦截或显示异常，iOS Safari 尤其敏感
- 自动化测试中无法模拟点击，会导致 E2E 测试失败
用 <dialog></dialog> 实现可访问、可样式化的弹窗
<dialog></dialog> 是 HTML5 原生元素，语义正确、支持 showModal() 和键盘焦点管理，但 Chrome 97+ 才稳定支持，Firefox 需要 about:config 启用 dom.dialog_element.enabled（默认已开启），Safari 15.4+ 支持。
- 基础结构：
<dialog id="myDialog"><p>请输入邮箱</p> <button onclick="this.closest('dialog').close()">关闭</button> </dialog> - 必须用 JS 打开：
document.getElementById("myDialog").showModal()，直接写open属性不会触发模态行为 - 点击遮罩层默认不关闭，需手动监听
click事件判断是否点在 backdrop 上 - 记得加
role="dialog"和aria-modal="true"提升可访问性（尤其对屏幕阅读器）
阻止 dialog 关闭后页面滚动回顶部
调用 close() 后，部分浏览器（尤其是 Safari）会自动将焦点移回 ，导致页面滚到顶部——这在长表单页非常干扰用户体验。
- 解决方法：关闭前记录当前滚动位置，关闭后立即恢复：
const scrollY = window.scrollY; dialog.close(); setTimeout(() => window.scrollTo(0, scrollY), 0);
- 更稳妥的做法是关闭时把焦点设回触发弹窗的按钮：
triggerButton.focus() - 不要依赖
dialog.returnValue做业务判断——它只在用户按 Esc 或点击 backdrop 时有值，且不同浏览器行为不一致
真正难的不是让弹窗“出现”，而是让它不抢焦点、不打断滚动、不破坏键盘导航、不被屏幕阅读器跳过。这些细节在 alert() 里全被绕过了，但在 <dialog></dialog> 里都得亲手处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
