# dialog 与 popover 分主题阅读索引

核对日期为 2026-11-01。规范与 API 文档用于确认当前契约，作者文章用于补充场景、动机和测试思路。旧文章中的「当前仅支持某浏览器」不能直接当作今天的兼容结论。

## 原生行为与事件

| 资料 | 适合解决的问题 | 阅读边界 |
| --- | --- | --- |
| [HTML Standard：dialog](https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element) | 模态、关闭算法、返回值与原生焦点步骤 | Living Standard 会更新，实际终端另测 |
| [HTML Standard：popover](https://html.spec.whatwg.org/multipage/popover.html) | auto / manual / hint、嵌套、焦点和作者职责 | 规范能力不等于所有版本已实现 |
| [MDN dialog 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog) | 基础写法、closedby、表单校验与动画 | 不同子特性的兼容表分别查看 |
| [MDN showModal](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) | inert、Top Layer、iframe 作用范围与异常 | show 与 showModal 不可混为同一路径 |
| [MDN close](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close) | 显式关闭及 returnValue | close 不会先触发 cancel |
| [MDN requestClose](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/requestClose) | 可取消的统一关闭请求 | 需要单独确认目标版本支持 |
| [MDN cancel 事件](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event) | Esc 请求与同步 preventDefault | 不涵盖所有关闭入口 |
| [MDN beforetoggle](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) | 切换前初始化与是否可取消 | 打开可取消，关闭不可取消 |
| [MDN toggle](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) | 最终显隐通知及事件合并 | 不能假定一次 API 调用对应一次事件 |
| [MDN Popover API 使用指南](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using) | 声明式触发、嵌套、定位与动画 | 触发器关联和语义仍按实际场景设计 |

## 绘制、定位与动画

| 资料 | 可以继续看的内容 |
| --- | --- |
| [MDN Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) | 哪些元素进入顶层、普通 z-index 与顶层的关系 |
| [MDN CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning) | 锚点关联、position-area 和溢出备选位置 |
| [Floating UI Vue](https://floating-ui.com/docs/vue) | 将几何定位、尺寸变化和自动更新交给专门的定位库 |
| [Chrome：Four new CSS features for smooth entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations) | starting-style、display、allow-discrete、overlay 如何配合；这是特性解释，不代表其他引擎都已实现 |
| [MDN overlay](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overlay) | 退出期间保留顶层绘制，作者不能直接设置顶层身份 |
| [MDN @property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property) | 为自定义变量声明可插值类型，适合颜色或渐变参数 |
| [MDN Animation.finished](https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished) | 等待动画与处理取消；Promise 完成和操作仍有效需要分别判断 |
| [MDN prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) | 为系统减少动态效果提供分支 |
| [Chrome：阻止模态下页面滚动](https://developer.chrome.com/docs/modern-web-guidance/guides/ui-behaviors/prevent-page-scroll-under-modal-dialog) | 惯性与滚动链、backdrop、非溢出滚动容器的实现差异 |
| [web.dev：Popover and dialog](https://web.dev/learn/css/popover-and-dialog) | 两类组件的 CSS 基线、打开状态选择器、动画和定位的组合 |

## 框架封装

- [Vue 组件 v-model](https://vuejs.org/guide/components/v-model.html)：defineModel、默认值与父子契约。
- [Vue 模板引用](https://vuejs.org/guide/essentials/template-refs.html)：挂载后取得原生元素，空 ref 和组件公开面。
- [Vue watcher 的调度时机](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)：post watcher 和副作用清理。
- [Vue KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance)：停用与卸载不同，缓存页面中的浮层需要自己的生命周期策略。
- [React 与外部控件同步](https://react.dev/learn/synchronizing-with-effects#controlling-non-react-widgets)：用 ref 和 Effect 包装原生命令式接口；普通业务仍可使用声明式 prop。

## 作者实践与争议边界

| 作者 / 日期 | 文章 | 值得借来检查什么 |
| --- | --- | --- |
| Scott O’Hara，2023-01-26 | [Use the dialog element (reasonably)](https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html) | 原生 dialog 已经能减少大量可访问性基础工作，同时承认历史用户与迁移成本 |
| Hidde de Vries / Scott O’Hara，2024 | [On popover accessibility: what the browser does and doesn’t do](https://hidde.blog/popover-accessibility/) | 平台默认映射与作者应补充的角色、键盘、焦点行为 |
| Scott O’Hara，2025-03-14，更新于 03-16 | [Popping preconceived popover ponderings](https://www.scottohara.me/blog/2025/03/14/popovers.html) | 为什么失焦不默认关闭、为什么 popover 非模态，以及不同浮层模式的职责 |
| Adrian Roselli，2023-05-26，更新于 2025-12-05 | [Brief Note on Popovers with Dialogs](https://adrianroselli.com/2023/05/brief-note-on-popovers-with-dialogs.html) | 原生 popover 与自定义模态重叠时，显示层级和关闭操作可能错位；保留历史实验条件 |
| Adrian Roselli，2025-06-06，更新于 2026-04-23 | [Where to Put Focus When Opening a Modal Dialog](https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html) | 长文本、危险操作和简单通知需要不同的初始焦点 |
| Manuel Matuzović，2025-03-07 | [Close requests, close watchers, and the dialog element](https://www.matuzo.at/blog/2025/close-requests-dialog) | 除 Esc 外，系统返回、辅助技术与设备输入也可能发起关闭；部分输入明确没有验证 |
| Manuel Matuzović，2026-01-16 | [Better defaults for popovers](https://www.matuzo.at/blog/2026/better-defaults-for-popovers) | 从默认居中改为锚点定位，使用 feature query 与备选方向；兼容现状按今天的数据重查 |
| 大漠，2026-05-11 | [Web UI：用 dialog 和 popover 搭建分层界面](https://zhuanlan.zhihu.com/p/2037089238731240869) | 分层 UI、原生 API、backdrop 与现代动效的整体介绍；本示例的讨论起点 |

## 与组件库对照

- [Ant Design Modal](https://ant.design/components/modal/)：异步确认、加载、焦点、滚动、挂载与销毁策略。
- [Ant Design Tooltip](https://ant.design/components/tooltip/)：触发方式、延迟、placement 和 getPopupContainer。
- [Element Plus Dialog](https://element-plus.org/en-US/component/dialog.html)：before-close、lock-scroll、append-to、拖拽与销毁。
- [Element Plus Tooltip](https://element-plus.org/en-US/component/tooltip.html)：Popper 定位、fallback、teleported 和触发行为。
- [Tippy 配置](https://atomiks.github.io/tippyjs/v6/all-props/)：成熟 Tooltip 的交互范围；同时检查[仓库归档状态](https://github.com/atomiks/tippyjs)。
- [dialog-polyfill 限制](https://github.com/GoogleChrome/dialog-polyfill#limitations)：旧内核的 API 模拟不能完全复刻真实 Top Layer。