关闭按钮点不动的三大原因：id获取失败、动态元素未用事件委托、css遮挡；移动端需≥44px热区；隐藏弹窗后须恢复body滚动；禁用window.close()，应操作dom隐藏元素。
关闭按钮为什么点不动？先查这三处
不是代码写错了，而是事件根本没绑上或没执行。最常断在这三个位置：
• document.getElementById("modal") 返回 null：ID 拼错、大小写不对、或 JS 执行太早（DOM 还没加载完）
• 关闭按钮是动态插入的，但事件监听写在页面初始化时，没用事件委托
• CSS 遮挡：父容器设了 overflow: hidden，或按钮 z-index 太低，点击穿透失败
快速验证：给按钮加 onclick="alert('clicked')"，点一下没反应？说明事件压根没注册上。
移动端关闭按钮必须 ≥44px × 44px
iOS Safari 和 Android Chrome 对可点击区域有硬性要求，小于 44px 容易误触或被忽略。
别只放大图标，用 padding 扩展热区更可靠：
• 按钮本身设 width: 44px; height: 44px;
• 图标用 font-size: 20px 居中，靠 padding 补足尺寸
• 定位用 position: absolute; top: 8px; right: 8px;，避免紧贴右上角触发 iOS 滑动返回手势
隐藏弹窗后必须恢复 body 滚动
很多弹窗实现会临时加 body { overflow: hidden } 防止背景滚动，但关闭后常忘记恢复——用户点完关闭按钮，页面依然不能滚动，以为卡死了。
正确做法是绑定关闭逻辑时同步处理：
• 用 classList.add("hidden") 控制弹窗显隐（推荐）
• 在动画结束回调里再清除 overflow，否则可能提前释放滚动导致视觉抖动
• 示例：modal.classList.add("hidden"); document.body.style.overflow = "";
window.close() 别用了，它基本无效
直接调用 window.close() 在绝大多数场景下静默失败，控制台可能报错 Scripts may close only the windows that were opened by them。
这不是代码问题，是浏览器主动拦截：
• 用户手动打开的标签页、刷新后的页面、从链接跳转来的页面，一律不允许脚本关闭
• 移动端和 PWA 中完全不支持
• onclick="window.close()" 这种写法建议直接删掉，留着反而误导维护者
真正该做的是：用 element.classList.add("hidden") 或 element.remove() 隐藏 DOM 元素，而不是试图关掉浏览器标签
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
