本文讲解如何正确通过javascript为弹窗添加“点击关闭”功能，重点解决因css选择器错误、类名误加点号及脚本执行过早导致的弹窗无法隐藏问题，并提供可直接运行的完整代码示例。
本文讲解如何正确通过javascript为弹窗添加“点击关闭”功能，重点解决因css选择器错误、类名误加点号及脚本执行过早导致的弹窗无法隐藏问题，并提供可直接运行的完整代码示例。
要让弹窗在用户点击按钮后平滑消失且不可交互，关键在于三方面协同：正确的DOM操作逻辑、精准的CSS类选择器匹配、以及脚本执行时机的合理安排。下面将逐一展开说明。
✅ 正确添加CSS类（而非带点号的字符串）
原始代码中存在一个常见但致命的错误：
popup.classList.add('.click'); // ❌ 错误：传入了带 '.' 的字符串classList.add() 方法接收的是纯类名字符串（不带点号），否则浏览器会尝试添加一个名为 ".click" 的非法类名（含点号），导致后续CSS规则 .popup.click 完全不生效。
✅ 正确写法应为：
立即学习“前端免费学习笔记（深入）”；
popup.classList.add('click'); // ✅ 仅传入类名 'click'✅ 同步更新CSS选择器
对应地，CSS中需使用复合选择器 .popup.click（表示同时拥有 popup 和 click 两个类的元素），而非 .popup .click（后者是后代选择器，要求 .click 是 .popup 的子元素）：
/* ❌ 错误：后代选择器，不匹配 */
.popup .click { opacity: 0; pointer-events: none; }
/* ✅ 正确：并集选择器，匹配同时含两个类的元素 */
.popup.click {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-out; /* 建议显式声明过渡属性 */
}? 提示：
pointer-events: none可彻底禁用鼠标交互（包括点击、悬停），配合opacity: 0实现视觉隐藏+功能禁用双重效果；而transition应明确指定opacity属性，避免影响其他过渡行为。
✅ 确保脚本在DOM就绪后执行
正如提问者后来发现的——将 <script></script> 标签置于
