结论：必须用JavaScript控制显隐和提交，CSS处理样式与动画，HTML仅提供结构；dialog兼容性差，推荐手写div modal；评分用radio最稳妥；提交后需禁用按钮、清空选择、手动重置状态。
怎么用原生 HTML + CSS + JavaScript 实现一个带打分功能的评价弹窗
直接说结论：不能只靠 HTML，必须配合 JavaScript 控制显隐和提交逻辑，CSS 负责遮罩层与动画，HTML 仅提供结构。纯 HTML 无法响应点击、保存分数或关闭弹窗。
常见错误是把 dialog 元素当万能弹窗用——它虽原生支持 showModal()，但 Safari 对 dialog 的 close 事件和 backdrop 样式兼容性差，且不支持键盘 ESC 关闭（旧版 Safari），实际项目中更推荐手写结构。
- 用
<div class="modal">+display: none/flex切换显隐，兼容性稳 - 评分区用
<input type="radio">最轻量，语义正确，无障碍友好 - 务必给弹窗加
aria-modal="true"和role="dialog"，否则屏幕阅读器可能读不全内容 - 点击遮罩层（非按钮区域）应关闭弹窗，但要排除点击内部表单元素（如星星、输入框）时触发关闭
为什么不用 <dialog> 而选手写 modal 结构
<dialog> 看似省事，但真实项目里容易踩三个坑：
- Safari 15.4–16.3 中，
dialog.close()不触发close事件，导致清理逻辑失效 - 点击 backdrop 关闭后，焦点未自动回到触发按钮，不符合 WCAG 2.1 要求
- 无法统一控制 backdrop 的模糊/透明效果，
::backdrop在部分安卓 WebView 中不生效
所以更可靠的做法是：用 div 模拟遮罩层，用 classList.toggle() 控制显示，手动管理焦点（focus() 回到触发按钮，focusin 捕获内部焦点防止跳出）。
立即学习“前端免费学习笔记（深入）”；
打分交互怎么做才不卡顿、不误点
用户点星星打分，本质是选择一个值（1–5）。用 radio 比用 click 监听 div 更稳妥：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 避免手指滑动误触多颗星；
radio天然互斥 - 空格键、回车键可直接确认，符合键盘操作习惯
- 不需要额外阻止默认行为或节流点击
- 样式上用
label包裹input+ 图标，隐藏input但保留可访问性
示例结构片段：
<div class="rating"> <input type="radio" name="score" id="s5" value="5"><label for="s5">★★★★★</label> <input type="radio" name="score" id="s4" value="4"><label for="s4">★★★★☆</label> <!-- ... --> </div>
注意：id 和 for 必须严格匹配，否则点击 label 不会选中 radio。
提交后怎么清空并防重复提交
用户点“提交评价”后，常见问题是：按钮没置灰、没清空选择、没反馈状态。必须做三件事：
- 提交瞬间禁用按钮：
button.disabled = true，防止连点 - 清空 radio 选择：
document.querySelectorAll('input[name="score"]').forEach(el => el.checked = false) - 关闭弹窗后，重置按钮文字和状态，比如从“已提交”切回“写评价”
如果提交走 fetch，记得在 finally 里恢复按钮可用性，而不是只在 then 里做——否则网络失败时按钮永远卡死。
真正难处理的是用户关掉弹窗又立刻重开：这时候要确保上次选的分不残留。最简单办法是每次 showModal() 前，强制清除所有 checked 状态，别依赖 DOM 初始化值。
