如何使用HTML、CSS和少量JavaScript创建无障碍弹窗和模态框
内容提要
本文介绍如何使用HTML的<dialog>标签和popover属性创建无障碍弹窗和模态框，无需复杂框架。通过command和commandfor属性或JavaScript的showModal()方法实现模态框，show()方法用于非模态对话框。文章还涵盖定位技巧、::backdrop样式定制，并提醒避免直接使用Flex/Grid布局，以及处理背景滚动问题。
延伸解读
原生API的浏览器兼容性
文章提到command和commandfor属性可能不被旧浏览器支持，建议使用showModal()方法作为替代。此外，CSS Anchor Positioning（如position-anchor）是较新的特性，使用前需检查浏览器支持并提供回退方案。开发者应根据目标用户群体选择合适的实现方式，确保功能在主流浏览器中正常工作。
避免常见的布局陷阱
直接在popover或dialog元素上使用Flex或Grid布局会覆盖其默认的display:none，导致元素始终可见，无法正常隐藏。建议使用:popover-open或dialog[open]伪类来应用布局样式，仅在元素打开时生效。这有助于保持弹窗的显示/隐藏行为符合预期。
处理背景滚动问题
在模态框打开时，某些浏览器仍允许背景页面滚动，影响用户体验。文章建议使用:has()伪类，如html:has(dialog[open]) { overflow: hidden; }，来在模态框打开时禁用页面滚动。此方法可灵活应用于任何包含dialog的父元素，确保模态框打开时背景内容保持静止。
Q&A
如何使用HTML的<dialog>标签创建无障碍模态框？
可以使用<dialog>标签，并通过command和commandfor属性或JavaScript的showModal()方法打开模态框。例如，在按钮上设置command="show-modal"和commandfor="dialog-id"，或者使用dialog.showModal()。模态框打开时，页面其余部分变为惰性，并显示::backdrop。
popover属性和<dialog>标签有什么区别？
popover属性用于创建非模态的弹出层，用户仍可与页面其他部分交互；而<dialog>标签配合showModal()或command="show-modal"创建模态框，会锁定页面，用户无法与背景交互。
如何用CSS定位popover元素到触发按钮旁边？
可以使用CSS Anchor Positioning。首先给触发按钮设置anchor-name属性，如anchor-name: --nav；然后在popover元素上设置position: absolute; position-anchor: --nav; 并使用anchor()函数定位，例如top: anchor(bottom); right: anchor(right);。
为什么不能在popover或dialog元素上直接使用Flex或Grid布局？
因为popover和dialog元素默认display为none，直接设置display:flex或grid会覆盖默认行为，导致元素始终可见，无法隐藏。应该使用:popover-open或dialog[open]伪类来应用布局样式。
如何防止模态框打开时背景页面滚动？
可以使用CSS的:has()伪类，例如html:has(dialog[open]) { overflow: hidden; }，这样当对话框打开时，页面滚动被禁用。
如何自定义模态框的遮罩层颜色？
使用::backdrop伪类，例如dialog::backdrop { background: rgba(43, 50, 200, 0.4); }，可以设置遮罩层的背景色和透明度。
如何用JavaScript打开非模态对话框？
使用dialog元素的show()方法，例如dialog.show();，这样对话框打开时页面其他部分仍然可交互。
