关闭按钮必须用 display: none 而不是 window.close()，因浏览器拦截非 script 打开的页面关闭；移动端点击区域需 ≥44px×44px；隐藏弹窗时须同步恢复 body overflow； 不适合广告弹窗，兼容性与控制力不足。
关闭按钮必须用 display: none 而不是 window.close()
直接调用 window.close() 在绝大多数场景下会静默失败，控制台可能报错 Scripts may close only the windows that were opened by them。这不是代码写错了，是浏览器主动拦截——用户手动打开的标签页、刷新后的页面、从链接跳转来的页面，一律不允许脚本关闭。广告弹窗属于“非 window.open() 创建的 DOM 元素”，所以别碰这个 API。
右上角关闭按钮的定位和点击区域要留足 44px × 44px
移动端（尤其是 iOS Safari）对可点击区域有最小尺寸要求，小于 44px 容易误触或被忽略。用 CSS 实现时注意：
-
position: absolute配合top: 8px; right: 8px是常见安全偏移 - 按钮本身至少设
width: 44px; height: 44px，哪怕图标只占 20px - 用
padding扩展点击热区比单纯放大图标更可靠 - 避免把关闭按钮放在弹窗边缘紧贴边框，iOS 上容易触发“滑动返回”手势冲突
隐藏弹窗时记得重置 body 的 overflow
很多弹窗实现会临时加 body { overflow: hidden } 来防止背景滚动，但关闭后常忘记恢复。后果是：用户点完关闭按钮，页面依然不能滚动，以为卡死了。
正确做法是绑定关闭逻辑时同步处理：
const closeBtn = document.getElementById('close-btn');
const modal = document.getElementById('ad-modal');
closeBtn.addEventListener('click', () => {
modal.classList.add('hidden');
document.body.style.overflow = '';
});
如果用了 CSS 动画（比如 opacity + transform），建议在动画结束回调里再清除 overflow，否则可能提前释放滚动导致视觉抖动。
<dialog></dialog> 标签不适合广告弹窗
虽然 <dialog></dialog> 自带 showModal() 和 close()，看起来极简，但它有硬性限制：
- 必须由用户交互（如 click）触发打开，不能 onload 自动弹
- 关闭后焦点自动回到触发元素——广告弹窗通常没有明确触发源，容易让键盘用户迷失
- 不支持自定义遮罩层样式（比如半透明蒙版颜色、模糊效果）
- IE 和旧版 Safari 完全不支持，需大量 polyfill
广告场景追求兼容性、可控性和快速集成，<div> + 类名切换仍是更稳妥的选择。
<p>真正极简的关键不在代码行数，而在是否绕开了浏览器策略、适配了触控精度、并管理好了副作用——比如滚动锁定、焦点、动画时机。这些细节漏掉一个，用户就会觉得“关不掉”或“关完页面卡住”。</p>
</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
