最人性化弹窗是用户需要时自然出现、不打断任务、一秒关闭的交互；原生<dialog>通过默认禁滚动、Esc关闭、自动聚焦等特性最贴近目标，右下角通知则应放弃模态设计。

最人性化不是“最炫”或“最自动”，而是用户在需要时能自然看到、不打断当前任务、且能一秒关闭的弹窗。原生 <dialog> 配合语义化交互和焦点管理，是目前最接近这个目标的技术路径。

为什么 <dialog> 比 display: none + JS 更贴近人性化

它不是靠 CSS 隐藏再 JS 切换类来“模拟”模态行为，而是浏览器原生理解“这是一个临时中断性界面”。这意味着：

• 默认禁用背景滚动（无需手动加 body { overflow: hidden }）
• 按 Escape 键自动关闭（无需监听 keydown）
• 打开时自动将焦点移入弹窗（无障碍基础已内置）
• 支持 showModal() 强制模态，也支持 show() 非阻断式展示

但注意：<dialog> 在 Safari 15.4+ 才完全支持 showModal()，旧版需降级 fallback。

aria-hidden 和 inert 的实际分工不能混用

很多人以为加了 aria-hidden="true" 就等于“页面其他内容不可操作”，其实不是。它只告诉读屏软件“忽略这部分”，但键盘仍可 tab 进去、鼠标仍可点击。

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 真正冻结背景交互，得用 inert 属性（Chrome 105+、Firefox 111+ 支持）
• 不支持 inert 的浏览器，必须手动遍历所有可聚焦元素并设 tabindex="-1" + aria-disabled="true"
• aria-hidden="true" 只应加在弹窗自身（当它关闭时），而不是加在遮罩层或 body 上

漏掉 inert 或等效处理，会导致键盘用户能意外 tab 出弹窗、触发后台按钮——这是无障碍投诉高频点。

右下角通知类弹窗必须放弃“模态”设计

这类弹窗本质是轻量提示，不是阻断任务的对话框。强行套用 <dialog> 或 showModal() 反而破坏体验：

• 它不该抢焦点，否则用户正在输入表单时突然跳走
• 它不该拦截 Esc，否则用户想退出全屏时被卡住
• 它应该有明确自动关闭倒计时（如 5s），并允许鼠标悬停暂停
• 位置用 position: fixed; bottom: 24px; right: 24px;，避免遮挡右下角操作按钮（如“返回顶部”）

用 <div role="alert" + aria-live="polite" 更合适，既让读屏朗读，又不打断用户操作流。

真正难的不是让弹窗“出现”，而是让它出现得不突兀、消失得不唐突、关闭得不费劲——这三点，90% 的弹窗实现都在某个环节悄悄失败。