优惠弹窗需三层结构（遮罩层+容器+内容），用display控制显隐，localStorage存关闭时间戳防重复展示，遮罩层fixed全屏，弹窗transform居中，关闭按钮设type="button"确保可访问性。
怎么用原生 HTML + CSS + JS 实现一个可关闭的优惠弹窗
直接上手：核心是三层结构（遮罩层 + 弹窗容器 + 内容），配合 display 或 visibility 控制显隐，用 localStorage 记住用户是否已关闭，避免重复打扰。
常见错误是只写 HTML 结构但没绑定关闭逻辑，或者用 opacity: 0 配合 pointer-events: none 导致键盘无法聚焦、屏幕阅读器仍可访问——这不符合可访问性要求。
- 遮罩层用
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5)，确保覆盖全屏 - 弹窗本身加
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)居中，别用margin: auto在 fixed 下无效 - 关闭按钮必须带
type="button"，防止在form内误触提交 - 首次进入页面时检查
localStorage.getItem('promoClosed')，为'true'就不显示
如何让优惠弹窗只对新用户或 24 小时内未关闭过的人展示
靠时间戳判断比单纯用布尔值更可靠。用户关闭时存当前时间戳，下次打开页面时读取并对比。
注意：不能依赖 Date.now() 直接比对毫秒数做“24 小时”判断，因为本地时间可能被手动修改；更稳妥的是和服务端时间对齐，但若无后端，至少用 new Date().getTime() 并接受误差。
立即学习“前端免费学习笔记（深入）”；
- 关闭时存：
localStorage.setItem('promoClosedAt', Date.now().toString()) - 显示前检查：
const closedAt = localStorage.getItem('promoClosedAt'); if (closedAt && Date.now() - parseInt(closedAt) - 如果用户清空了 localStorage，这个逻辑自动失效——这是预期行为，无需额外兜底
- 不要用
sessionStorage，它关掉标签页就丢，起不到“24 小时”作用
为什么点击遮罩层背景会意外关闭弹窗？怎么阻止
因为很多人给遮罩层绑了 onclick="closePopup()"，但没区分点击目标。用户点到弹窗内部（比如输入框、按钮）时，事件会冒泡到遮罩层，导致误关。
正确做法是监听遮罩层的 click，然后检查 event.target === event.currentTarget，只有直接点在遮罩层本体上才关闭。
document.getElementById('overlay').addEventListener('click', function(e) {
if (e.target === e.currentTarget) {
closePopup();
}
});- 千万别用
e.stopPropagation()塞进弹窗内部所有元素——维护成本高且容易漏 - 如果弹窗里有
<a>或<button>，它们默认可聚焦，要确保键盘用户也能用Tab进入、Esc关闭 - 移动端需额外处理
touchstart，但现代浏览器基本能映射为click，先不加也行
用 dialog 元素实现优惠弹窗有什么坑
<dialog> 语义清晰、自带 showModal() 和 close()，但兼容性仍是硬伤：iOS Safari 直到 16.4 才支持，旧版微信内置浏览器（X5 内核）完全不识别。
如果你的用户里有大量 iOS 15 及以下设备，或者企业微信/钉钉内嵌场景，别用 dialog——它会退化成普通 div，失去遮罩、焦点锁定、Esc 关闭等关键能力。
- 检测支持：
if ('showModal' in HTMLDialogElement.prototype)，不支持就 fallback 到 div 方案 -
dialog默认无样式，必须手动设position: relative、margin: 0 auto等才能居中，CSS 不如传统方案直观 - 调用
showModal()后，页面滚动会被锁住，但某些安卓 WebView 会失效，得自己补document.body.style.overflow = 'hidden'
实际项目里，最常被忽略的是「关闭后是否允许用户再次手动唤出」。很多运营要求加个悬浮按钮（比如右下角「查看优惠」），这个按钮的显示逻辑要和弹窗的关闭状态联动——别忘了同步更新它的 style.display 或 class。
