<dialog> 基础：show vs showModal
<dialog> 是原生弹窗元素。打开它有两种方式，差别巨大:dialog.show() 是非模态（背景照常能点）,dialog.showModal() 是模态——它把对话框送进 top layer（永远盖在所有内容之上，不用碰
z-index）、让背景自动 inert（不可点、读屏跳过）、渲染 ::backdrop 遮罩、把焦点限制在对话框内、还接管了 Esc。
1 · 关闭后能拿到什么：returnValue
模态对话框最便捷的「回值」模式：表单按钮带 value，提交即关、值落到 returnValue。你在 close 事件里读取它，即可知道用户点了「确定」还是「取消」、填了什么——无须自行挂载大量回调。
别手动加 open 属性来开关对话框。直接写 <dialog open> 或 dlg.open = true 永远是非模态的：不进 top layer、没有 ::backdrop、不锁背景、焦点也不会进去。要模态效果必须用 showModal()。open 属性只反映「是否打开」，不应将其用作开关。
top layer 是什么？浏览器维护的一个独立于普通层叠上下文的最顶层。模态 <dialog>、popover、原生全屏都渲染在这里——所以它们天然盖在一切之上，不再需要 z-index: 9999 参与层叠竞争。::backdrop 就是 top layer
元素背后那块全屏伪元素。（层叠规则的细节见 stacking-contexts 系列。）
延伸阅读：An intro to the dialog element · Chris Ferdinandi——一篇简洁清晰的入门文章，把 <dialog> 的 showModal / close / returnValue /
form method="dialog" 讲解到位，正好覆盖本页这套基础。