纯 HTML 无法实现举报弹窗，必须用 JavaScript 调用 showModal()；推荐用 + 单选 + type="submit" 表单 + fetch() 提交 + dialog.close() 关闭 + 焦点管理防点透。
怎么用 HTML 实现举报弹窗（不依赖 JS）？
纯 HTML 无法触发弹窗交互，dialog 元素必须配合 JavaScript 的 showModal() 或 show() 才能显示。常见错误是只写 <dialog></dialog> 标签却不调用方法，结果页面完全没反应。
- 必须用
<button onclick="document.getElementById('reportDialog').showModal()"></button>这类内联 JS 或外部脚本驱动 -
dialog在 Safari 15.4+、Chrome 98+、Firefox 97+ 支持，旧版需降级为<div> + CSS 模拟 <li>不要给 <code>dialog设display: none—— 它默认就是隐藏的，强行设会破坏可访问性 - name 属性要统一（如
name="report_type"），否则浏览器不会互斥 - 推荐值用语义化英文（
"copyright"、"spam"、"harassment"），别用中文或空格，避免后端解析失败
举报类型怎么用单选按钮组织？
用 <fieldset></fieldset> 包裹一组 <input type="radio">，语义正确且方便聚焦导航。别用 <div> 堆 checkbox，举报是单选场景，多选反而导致后端校验混乱。
<ul>
<li>每个 <code>input 必须有唯一 id 和对应 <label for="xxx"></label>，否则屏幕阅读器无法识别
提交举报时为什么表单总被忽略？
举报弹窗里如果直接放 <form></form>，但没处理 submit 事件，默认会刷新页面，导致弹窗关闭、数据丢失。更隐蔽的问题是：用户点了“确定”按钮却没绑定任何逻辑。
- 按钮类型必须是
type="submit"（不是button），且在form内部，否则触发型 submit 事件无效 - 用
event.preventDefault()拦住默认提交，再用fetch()发送数据到后端接口 - 弹窗关闭应放在请求成功回调里：
dialog.close()，而不是点击就关——万一网络失败，用户得重填一遍
移动端点透和焦点丢失怎么防？
在 iOS Safari 上，dialog 弹出后点背景常触发下层按钮，或者首次点击 radio 没响应，本质是焦点没落到可交互元素上。
立即学习“前端免费学习笔记（深入）”；
- 弹窗打开后立即用
dialog.querySelector('input[type="radio"]').focus()把焦点设到第一个选项 - 给
dialog加inert属性（或用 JS 动态加）可禁用背景交互，但注意兼容性：Firefox 不支持inert，得用pointer-events: none+ class 切换 - 避免在
dialog内用position: fixed的遮罩层——它会干扰原生 dialog 的 focus 管理
