HTML dialog 元素如何通过 command 属性实现按钮控制弹窗
HTML dialog 元素可以通过 command 属性和 commandfor 属性在按钮上声明式地控制弹窗的打开与关闭。
使用 Invoker Commands API 控制模态弹窗
Invoker Commands API 允许开发者使用 HTML 属性在按钮上声明式地控制 dialog 元素。要打开一个模态弹窗，需要在按钮上设置 command 属性为 show-modal，并设置 commandfor 属性为目标 dialog 的 id。当用户点击该按钮时，浏览器会自动发送 show-modal 命令。关闭弹窗时，可以在 dialog 内部的按钮上设置 command 属性为 close，同样使用 commandfor 指向同一个 dialog id。这种方式无需编写 JavaScript 代码即可实现基本的弹窗交互。
这种声明式方法特别适合简单的交互场景。例如，一个“打开设置”按钮可以设置 commandfor 指向 id 为 settings-dialog 的 dialog，而 dialog 内部的“确认”按钮则设置 command 为 close。通过这种方式，HTML 结构本身就能描述交互逻辑，使得代码更加清晰且易于维护。需要注意的是，只有 button 元素支持这些属性，且命令必须是 show-modal、close 或 request-close 之一。
使用 Popover API 控制非模态弹窗
对于非模态弹窗，可以使用 Popover API 的 popovertarget 和 popovertargetaction 属性。首先，必须在 dialog 元素上添加 popover 属性将其转换为 popover。然后，在触发按钮上设置 popovertarget 属性指向该 dialog 的 id。popovertargetaction 属性用于指定点击按钮时的动作，默认值为 toggle，即切换弹窗的显示与隐藏状态。这种方式创建的弹窗是非模态的，用户可以点击弹窗外部区域来关闭它。
这种 API 提供了比 Invoker Commands 更灵活的控制方式。例如，一个“显示提示”按钮可以设置 popovertarget 为 my-dialog，action 为 toggle。当用户点击按钮时，弹窗会显示；再次点击或点击外部区域时，弹窗会隐藏。由于 dialog 被标记为 popover，它默认支持“轻量级关闭”行为，即点击外部区域即可关闭。开发者也可以通过设置 popovertargetaction 为 hide 来仅实现关闭功能，而不切换状态。
验证弹窗控制是否生效的方法
验证弹窗控制是否生效最直接的方法是使用浏览器的开发者工具检查元素属性。首先，在 HTML 代码中找到触发弹窗的按钮，检查其是否包含正确的 command、commandfor、popovertarget 或 popovertargetaction 属性。例如，对于模态弹窗，按钮应包含 command='show-modal' 和 commandfor='dialog-id'。对于非模态弹窗，dialog 元素必须包含 popover 属性，且按钮应包含 popovertarget='dialog-id'。
其次，在浏览器中实际点击按钮进行测试。如果配置正确，模态弹窗应能通过点击按钮打开，并阻止与页面其他元素的交互；非模态弹窗应能通过点击按钮显示，且允许点击外部区域关闭。如果弹窗无法打开或关闭，请检查属性值是否拼写正确，以及 dialog 的 id 是否与 commandfor 或 popovertarget 的值完全匹配。确保没有使用 tabindex 属性干扰 dialog 元素的默认行为。
确保弹窗可访问性的注意事项
为了确保弹窗对所有用户友好，必须提供明确的关闭机制。对于模态弹窗，默认支持按 Esc 键关闭，但建议在 dialog 内部添加一个显式的关闭按钮。对于非模态弹窗，虽然支持点击外部关闭，但同样建议提供关闭按钮。此外，应使用 autofocus 属性将初始焦点设置在用户最可能交互的元素上，例如关闭按钮或弹窗本身，以帮助键盘用户快速操作。
在实现时，应避免使用 tabindex 属性干扰 dialog 元素，因为 dialog 元素本身不是可交互的，只有其内容可以接收焦点。浏览器在调用 showModal() 方法时会自动将焦点设置在 dialog 内部的第一个可聚焦元素上。如果内容是动态生成的，建议将 autofocus 属性添加到 dialog 元素本身，以确保初始焦点位置正确。同时，确保所有用户都能通过至少一种方式关闭弹窗，包括按钮点击和平台特定的手势（如移动端的返回手势）。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。