最人性化弹窗是用户需要时自然出现、不打断任务、一秒关闭的交互；原生通过默认禁滚动、esc关闭、自动聚焦等特性最贴近目标，右下角通知则应放弃模态设计。
最人性化不是“最炫”或“最自动”，而是用户在需要时能自然看到、不打断当前任务、且能一秒关闭的弹窗。原生 <dialog></dialog> 配合语义化交互和焦点管理，是目前最接近这个目标的技术路径。
为什么 <dialog></dialog> 比 display: none + JS 更贴近人性化
它不是靠 CSS 隐藏再 JS 切换类来“模拟”模态行为，而是浏览器原生理解“这是一个临时中断性界面”。这意味着：
- 默认禁用背景滚动（无需手动加
body { overflow: hidden }） - 按
Escape键自动关闭（无需监听keydown） - 打开时自动将焦点移入弹窗（无障碍基础已内置）
- 支持
showModal()强制模态，也支持show()非阻断式展示
但注意：<dialog></dialog> 在 Safari 15.4+ 才完全支持 showModal()，旧版需降级 fallback。
aria-hidden 和 inert 的实际分工不能混用
很多人以为加了 aria-hidden="true" 就等于“页面其他内容不可操作”，其实不是。它只告诉读屏软件“忽略这部分”，但键盘仍可 tab 进去、鼠标仍可点击。
- 真正冻结背景交互，得用
inert属性（Chrome 105+、Firefox 111+ 支持） - 不支持
inert的浏览器，必须手动遍历所有可聚焦元素并设tabindex="-1"+aria-disabled="true" -
aria-hidden="true"只应加在弹窗自身（当它关闭时），而不是加在遮罩层或 body 上
漏掉 inert 或等效处理，会导致键盘用户能意外 tab 出弹窗、触发后台按钮——这是无障碍投诉高频点。
右下角通知类弹窗必须放弃“模态”设计
这类弹窗本质是轻量提示，不是阻断任务的对话框。强行套用 <dialog></dialog> 或 showModal() 反而破坏体验：
- 它不该抢焦点，否则用户正在输入表单时突然跳走
- 它不该拦截 Esc，否则用户想退出全屏时被卡住
- 它应该有明确自动关闭倒计时（如 5s），并允许鼠标悬停暂停
- 位置用
position: fixed; bottom: 24px; right: 24px;，避免遮挡右下角操作按钮（如“返回顶部”）
用 <div role="alert"> + <code>aria-live="polite" 更合适，既让读屏朗读，又不打断用户操作流。
真正难的不是让弹窗“出现”，而是让它出现得不突兀、消失得不唐突、关闭得不费劲——这三点，90% 的弹窗实现都在某个环节悄悄失败。
