用<dialog>+radio实现可选优惠券弹窗：支持多券单选、选中反馈、关闭保留状态、表单联动；关键是在close事件中即时获取:checked值，用<label>包裹<input type="radio">确保语义与交互正确。
怎么用原生 HTML + CSS + JS 实现可选优惠券的弹窗
不能只靠 <dialog> 或纯 CSS 遮罩——它得支持多张券、选中态反馈、关闭后保留选择、还能和表单联动。核心是「状态可控」+「DOM 可交互」，不是做动画效果。
常见错误是把弹窗写成静态 div + display: none，结果点击券没反馈、关掉再打开选中状态丢了、或者点击遮罩层直接整个弹窗不可用了。
- 用
<dialog>元素（现代浏览器支持），配合showModal()和close()控制显隐，比手动切display更可靠 - 每张优惠券用
<label>包裹<input type="radio">，天然支持点击任意区域选中，且能用:checked伪类做视觉反馈 - 给所有
input加name（比如name="coupon"），确保单选互斥 - 监听
dialog的close事件，而不是click遮罩层——否则用户按 Esc 关闭时逻辑会漏掉
为什么 radio 比 checkbox 或自定义 class 切换更稳妥
优惠券通常是「选一张生效」，不是多选叠加。用 checkbox 容易误操作多选，还得额外加 JS 校验；用 class 模拟选中态则要手动维护 DOM 状态、处理键盘焦点、不兼容屏幕阅读器。
radio 天然满足：单选约束、表单自动收集值、formdata 事件里能直接拿到选中的 value、支持空格/回车触发、语义正确。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 每个
input的value设为优惠券 ID 或唯一标识（如value="COUPON_2024_SUMMER"），后续提交或计算折扣时直接可用 - 别用
id当 value——id是 DOM 标识，可能含特殊字符或空格，value应该是干净的业务键 - 如果默认要预选一张，加
checked属性即可，但注意：JS 动态插入时得用defaultChecked，否则可能不生效
怎么让弹窗关闭后还能读到用户选了哪张券
关键不是“存到 localStorage”，而是「在关闭瞬间把当前选中值记下来」。很多实现等弹窗关了再去查 DOM，但此时 dialog 已移除或隐藏，querySelector 找不到活跃元素。
- 在
dialog.addEventListener('close', ...)回调里，立刻执行document.querySelector('input[name="coupon"]:checked')?.value - 把这个值存在一个全局变量（如
window.selectedCouponId）或组件 state 里，后续提交表单前直接读取 - 不要依赖弹窗 DOM 持久存在——
<dialog>关闭后 DOM 还在，但 visibility 不可见，查:checked依然有效；不过保险起见，还是在 close 时抓 - 如果用框架（如 React），别在弹窗组件 unmount 后才读取，应在 onDismiss 或 onClose 里同步取值
移动端点击遮罩层关闭时，如何避免误触券卡片
手指点在遮罩上想关弹窗，结果点到了边缘的券卡片上，反而选中了券——这不是样式问题，是事件冒泡和点击热区重叠导致的。
- 给遮罩层（
<div class="modal-overlay">）加pointer-events: auto（默认就是），但给内部所有券卡片加pointer-events: none，然后只在<label>上设pointer-events: auto——这样只有 label 区域响应点击 - 更简单的方式：遮罩层用
<dialog>自带的 backdrop（不用自己写 overlay div），它默认不传递事件到底层内容，不会误触 - 测试时用真机调试，开启「显示触摸热区」，看点击位置是否精准落在 label 范围内
真正麻烦的是券数据动态加载、有失效状态、需要实时校验可用性——那些得接 API，不在弹窗 DOM 层解决。弹窗本身只管「呈现、选择、交出 value」，别的交给业务逻辑。
