告别手写遮罩层：用原生 dialog 实现弹窗

弹窗几乎是每个 Web 项目都绕不开的组件。过去我们习惯用 div 拼出遮罩层，再写一套 JS 管理 z-index、焦点、ESC 关闭和滚动锁定。代码越写越长，边界情况却总也补不完。

HTML 原生的 <dialog> 元素已经可以承担大部分工作：它会自动进入顶层、隔离背景交互、限制焦点范围，并在关闭后把焦点还给触发元素。本文从一个最小示例出发，逐步补齐表单交互、遮罩点击、样式和可访问性细节。

最小可用示例

先看一个可以直接运行的版本：