仅控制可见性，不触发模态行为；必须用showmodal()配合js确保焦点锁定、esc响应、遮罩关闭及可访问性。
dialog 的 open 属性只控制“是否可见”，不等于“已激活模态”
写了 <dialog open></dialog> 页面一加载就看到内容，不代表它是个可用的模态框。它只是绕过 JS、强制让元素从 display: none 变成 display: block，但没触发任何模态行为：没有灰色遮罩、背景可滚动、Tab 键能穿出、Esc 按下无反应、close 事件也不触发。
常见错误现象包括：
- 用户反复按 Esc 却没关闭，页面产生卡顿感
- 点击对话框外区域，背景仍可点击或滚动，导致误操作
- 屏幕阅读器读不到完整语义，因为缺少
aria-modal="true"和焦点锁定 - iOS Safari（16.3 及更早）会把
<dialog open></dialog>当普通<div> 渲染，既不居中也不限制缩放 <h3>为什么不能靠 CSS 强行显示 <code><dialog></dialog>？给
<dialog></dialog>写display: block或visibility: visible完全无效。浏览器对<dialog></dialog>的渲染逻辑是硬编码的：open属性或showModal()/show()调用是唯二触发渲染的入口。即使你加
!important，getComputedStyle(dialog).display仍返回none（除非已设置open）。试图用position: fixed + z-index手动模拟，会破坏showModal()后的自动居中逻辑，且 Safari 中可能引发子元素渲染异常。真要“默认弹窗”，JS 是绕不开的，且时机很关键
想一进页面就弹出带遮罩、锁焦点、支持 Esc 的对话框，必须用 JS。但直接在
<script></script>标签里写dialog.showModal()极易失败——DOM 还没挂载完，document.getElementById("myDialog")会返回null。正确做法：
- 把
<script></script>放在
- 把
