不使用 JavaScript 构建模态框？🤯 了解 HTML Popover API！

Source: Dev.to

什么是 HTML Popover API？

HTML Popover API 让你无需编写任何 JavaScript 就能创建功能完整的模态框。只需在标准 HTML 元素上添加少量属性，浏览器就会处理显示、隐藏，甚至“轻点关闭”（点击外部或按 Esc）的行为。

你可以把下面的示例复制粘贴到 CodePen 中查看实际效果。

Open Modal

  
## Modal Title

  
This is a modal built with the Popover API.

  Close

它是如何工作的？（细节拆解）

• popover 属性 – 添加到将作为模态框的元素（<dialog>）上。浏览器会把该元素视为弹出层，并保持隐藏状态，直到被触发。
• popovertarget="magic-modal" – 放在触发器上（例如按钮）。它将触发器与模态框的 id 关联，告诉浏览器要打开哪个弹出层。
• ::backdrop（CSS） – 你可以对这个伪元素进行样式设置，以在模态框激活时在其后创建暗色或模糊的遮罩层。
• 自动关闭 – 点击模态框外部或按 Esc 键会自动关闭模态框——无需 JavaScript。

好的、坏的，以及“这简直是我的救星”？

✅ 优点（为什么你会喜欢）

• 零 JavaScript – 不需要 useState、切换函数，也不会增加额外的 bundle 大小。
• 无需 z‑index 争夺 – Popover 会在浏览器的“顶层”渲染，自动出现在所有其他内容之上。
• 内置可访问性 – “轻点关闭”（外部点击）和 Esc 键处理开箱即用，无需额外的事件监听器。

❌ 缺点（何时仍需 JavaScript）

• 浏览器支持 – 这是一项现代特性；旧版浏览器需要 polyfill 或回退方案。在生产环境使用前请务必检查 Can I use…。
• 动画挑战 – 使用 CSS 实现简单的淡入很容易，但在元素从 DOM 中移除之前优雅地淡出则可能需要 JavaScript。
• 复杂交互逻辑 – 如果需要阻止模态框关闭（例如表单未填完），仍需使用 JavaScript 来拦截关闭行为。

结论

你准备好用原生 HTML Popover API 替代沉重的 React 模态库了吗？还是认为 JavaScript 仍将是弹窗的无可争议的王者？在评论区分享你的想法吧！ 🥊👇