用原生 javascript 实现优惠券弹窗需确保点击按钮后正确显示弹窗、将 data-code 属性中的优惠码复制到剪贴板、更新 ui 状态并持久化至 localstorage，同时兼容 ios safari 等限制。
点击按钮触发优惠券弹窗，用原生 JavaScript 控制显隐最稳妥
现代项目里直接上 modal 组件当然快，但很多静态页、老系统或 CMS 模板里没法引入框架，这时候用原生 JS + 纯 HTML/CSS 实现弹窗，兼容性好、体积小、逻辑可控。
关键不是“怎么画个弹窗”，而是“怎么让点击领取按钮后，真实把优惠码塞进剪贴板，并标记已领取”。
常见错误是只做视觉弹出，用户点“复制”却没反应，或者重复点击多次生成多个弹窗实例。
- 弹窗容器必须用
position: fixed且z-index足够高（建议 ≥ 1000），否则可能被轮播图、导航栏盖住 - 必须监听
click外部区域（document）和Esc键关闭，否则用户无法退出 - 优惠码建议用
data-code属性存于按钮上，而不是写死在弹窗里——方便同一页面多个不同面额券复用同一套逻辑
复制优惠码到剪贴板，优先用 navigator.clipboard.writeText()
旧方案用 document.execCommand('copy') 已被多数浏览器废弃，Chrome 90+、Firefox 120+ 都会报 execCommand is deprecated 警告，且在非用户手势（如 setTimeout 触发）下直接失败。navigator.clipboard.writeText() 是当前标准，但有两个硬性前提：页面必须是 HTTPS，且调用必须在用户事件回调内（比如 onclick）。
- 复制成功后要立刻给用户反馈，比如按钮文字变成“已复制”，并加个
check图标，不能只靠 console.log - 需包裹
try/catch，捕获NotAllowedError（权限被拒）、ReadonlyError（iOS Safari 常见）等异常 - iOS Safari 对
clipboardAPI 支持较弱，可降级为textarea.select() + document.execCommand('copy')（仅限 iOS UA 且navigator.clipboard不可用时）
领券状态需要持久化，localStorage 比 cookie 更合适
用户刷新页面后，“已领取”状态不能消失，否则会误以为还能再领。这时候不能只靠 JS 变量记状态，得存本地。localStorage 比 cookie 更轻量，不随每次请求发到服务端，也无需后端配合；唯一要注意的是同源限制和存储上限（通常 5MB）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 键名建议用
coupon_${code}或coupon_${id}，避免不同券之间覆盖 - 值可以是
1或new Date().toISOString()，后者方便后续统计首次领取时间 - 如果页面有“我的优惠券”列表，记得在 DOM 加载完后遍历所有领券按钮，读取
localStorage并更新 UI 状态（比如加disabled或灰掉）
移动端适配最容易漏的三处细节
PC 上跑得好好的弹窗，到手机上常出现遮挡、缩放错乱、点不到按钮等问题，核心不是“响应式”，而是“触控友好性”。
- 弹窗内容区加
max-height: 80vh和overflow-y: auto，防止长文案撑爆视口，iOS Safari 会卡死滚动 - 关闭按钮（×）尺寸至少
44px × 44px，符合苹果人机接口规范，否则手指点不中 - 禁用
body { overflow: hidden }的粗暴写法——iOS Safari 下会导致页面回弹失效，改用position: fixed; top: calc(-1 * var(--scroll-y))配合 JS 记录 scrollY 更可靠
实际交互链路就是：按钮点击 → 弹窗展开 → 用户点“复制” → 写入剪贴板 → 更新按钮状态 → 写入 localStorage → 关闭弹窗。其中任意一环断掉，用户就会觉得“这券领不了”。尤其注意 iOS 的 clipboard 权限策略和 scroll 锁定机制，这两处问题在线上环境被反复踩过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
