Popover API vs Dialog 模态框：理解关键区别
最近在阅读技术文章时，我发现了一个有趣的标题：“Popover API 进入基准”。作为一个前端开发，我对这个新 API 产生了极大的兴趣。之前我经常使用 <dialog> 元素来实现弹窗功能，而现在，Popover API 的出现为我提供了另一种解决方案。虽然这两个元素看起来有些类似，但它们之间其实有一些关键区别。理解这些区别对于优化用户体验和提升可访问性至关重要。接下来，我将带大家一起深入探讨这两者的异同以及它们各自的最佳使用场景。
适用场景
选择 <dialog> 的场景：
- 需要用户聚焦的模态弹窗
- 可访问性和键盘交互支持
选择 Popover 的场景：
- 非模态弹窗，允许用户轻松关闭
- 简单实现，代码量少
<dialog> 元素
根据 MDN 对 Dialog 元素的描述的解释，<dialog> 元素代表一个模态或非模态的对话框，或其他交互组件，如可关闭的警告框、检查器或子窗口。
模态对话框
<dialog> 元素通常用于在网页需要引起用户注意时，比如订阅新闻简报、要求关闭广告拦截器，或者同意网站条款。当这些弹窗出现时，它们通常会覆盖整个屏幕，模糊背景并禁用其他页面内容，用户必须输入所需信息或关闭弹窗才能继续。这就是所谓的模态对话框。
使用示例：
// 打开模态对话框
dialog.showModal();
// 关闭模态对话框
dialog.close();
使用 showModal() 方法时，用户可以通过按下 Esc 键关闭对话框。如果页面上同时有多个模态对话框，只有最后一个会被关闭。
非模态对话框
有时你可能不希望阻断用户的操作，只想展示一些信息，例如提醒通知、cookie 同意提示或工具提示（tooltip）。这些非模态弹窗不会强制用户与它们互动，用户可以自行关闭，或弹窗会自动消失。这类对话框通常也显示在页面的最顶层，但其优先级可以通过 z-index 控制。
使用示例：
// 打开非模态对话框
dialog.show();
// 关闭非模态对话框
dialog.close();
常见问题
在使用 <dialog> 作为非模态弹窗时，通常会遇到一些问题，需要通过 JavaScript 代码来解决：
- 没有“轻松关闭”功能，点击弹窗外部并不会自动关闭。
Esc键无法关闭非模态对话框，必须通过 JavaScript 手动处理。- 需要手动设置
z-index来确保弹窗出现在最顶层。
Popover API
popover 是一个可以添加到任何 HTML 元素上的新属性，它专注于非模态弹窗的轻松交互功能。以下是一个简单的例子：
<button popovertarget="mypopover">切换 Popover</button>
<div id="mypopover" popover>这是 Popover 的内容</div>
Popover 与 <dialog> 的主要区别
<dialog> 元素自带 role="dialog" 属性，它可以帮助屏幕阅读器等辅助技术识别该元素是一个对话框。而 popover 仅是一个属性，并不会有默认的 role。它可以应用于任何 HTML 元素，而这些元素在被触发之前默认是隐藏的。
与 <dialog> 相比，popover 更加轻量，通常只需要少量的代码。你可以选择通过 JavaScript 控制 popover 的显示与关闭，但大部分情况下，使用 popover=auto 便能实现轻松的关闭体验。
Popover 的两种模式：
popover="auto"：支持点击外部关闭，不需要 JavaScript 控制。popover="manual"：需要通过 JavaScript 明确地关闭它，比如点击按钮或通过计时器。
Popover 的优势
- 总是显示在页面的顶层，不需要显式设置
z-index。 - 实现非模态交互时几乎不需要额外的 JavaScript 代码。
<button popovertarget="mypopover">点击我</button>
<div id="mypopover" popover>这是一个 Popover</div>
如上所示，使用 popover 可以轻松实现非模态弹窗，代码简洁易管理。
设计注意事项
popover 可以通过 CSS 设置背景模糊或灰化效果，但与模态对话框不同的是，即使设置了这些效果，用户仍然可以点击弹窗外部并与其他网页元素交互。这一点在设计时需要特别注意。
结论
总的来说，<dialog> 元素和 Popover API 提供了灵活的选项，用于在 Web 应用中创建交互式弹窗。通过理解它们各自的特点和使用场景，开发者可以做出明智的选择，从而提升用户体验并简化开发流程。
参考资料
原文章来自于 Priyank Sevak再加上自己的理解
