模态框与对话框样式

HTML <dialog> 元素提供内置的模态行为：焦点陷阱、按 Esc 键关闭，以及 showModal() / close() 接口。请使用 CSS 为其设置样式，无需从头构建自定义模态框基础结构。

::backdrop 伪元素用于设置打开的 <dialog> 后方覆盖层的样式。请应用半透明背景：dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }。无需包装器 div。

请使用 CSS 将对话框居中：dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }。在对话框上使用自动外边距，可以将其放置在视口中央，无需使用 JS 定位。

请在对话框本身上设置 overflow-y: auto，以处理较长内容。模态框打开时，请在 body 上设置 overflow: hidden，防止背景滚动——使用 JavaScript 添加和移除一个类即可切换此设置。

请使用 @starting-style（Chrome 117 及更高版本）制作对话框进入动画，无需 JavaScript 即可实现纯 CSS 进入动画。为了获得更广泛的支持，请使用 JavaScript 添加打开状态类，并让变换和不透明度产生过渡：从向上滑入的 20px 位移过渡到 0 位移。

为对话框制作关闭动画比较棘手——调用关闭方法后，对话框会立即隐藏。解决方案包括：使用原生支持关闭动画的弹出层接口，或者通过 JavaScript 拦截关闭操作，播放退出动画类，并在动画结束后再调用关闭方法。

对话框会在所有其他页面内容之上打开。请利用对话框元素原生的层叠上下文来避免层级冲突——它会渲染在顶层，位于所有 CSS 层叠层级值之上，因此无需为对话框本身设置层叠层级。

在移动设备上，请将对话框从底部向上滑入，使其呈现为底部面板：dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }。在桌面设备上，请使用自动外边距模式将其居中，呈现传统模态框的效果。

原生对话框元素在打开时会自动将焦点移到内部第一个可聚焦元素。请确保对话框内部具有合理的 Tab 键顺序。请添加关闭按钮，并在对话框关闭时将焦点返回触发元素，以实现正确的键盘导航流程。

请添加 aria-labelledby，使其指向对话框标题；再添加 aria-describedby，使其指向对话框描述。对于 <dialog>，对话框角色是隐式提供的。当焦点进入对话框时，屏幕阅读器会朗读这些标签。

确认对话框需要包含：清晰的问题标题、简短的影响说明、破坏性操作按钮（红色、右对齐），以及取消按钮（左对齐或作为次要按钮）。请在取消按钮上使用 autofocus，让安全选项成为默认的键盘操作。

原生对话框元素结合背景遮罩伪元素、自动外边距居中、溢出控制、用于进入动画的 CSS 动画以及焦点管理，可以提供完整的、由 CSS 驱动的可访问模态框模式。在移动设备上使用响应式底部面板布局，并正确设置 ARIA 属性后，就能构成适用于生产环境的对话框组件。