网站Popup动画失效排查：本地与WordPress适配问题

核心报错排查 #

1. Uncaught ReferenceError: $ is not defined #

• 本地环境：检查jQuery文件路径是否正确，确保<script>标签的src指向真实存在的文件；
• WordPress环境：默认jQuery使用jQuery作为别名而非$，需将代码中所有$替换为jQuery，或用自执行函数映射别名：

(function($){
  // 原JS代码（含$的部分）放在此处
})(jQuery);

2. Failed to load resource: net::ERR_FILE_NOT_FOUND #

这是资源路径错误导致的：

• 本地环境：核对所有引入的JS/CSS文件相对路径，比如./js/gsap.min.js是否对应正确的文件层级；
• WordPress环境：必须使用wp_enqueue_script和wp_enqueue_style函数加载资源，禁止直接写<script>/<link>标签，避免路径解析异常。

文本层级与动画修复 #

1. 文本层级异常（仅h1显示，其他文本被遮挡） #

给弹窗容器添加足够高的层级：

.popup {
  z-index: 9999;
  position: relative; /* 确保z-index生效 */
}

同时检查弹窗内文本元素是否被设置了低层级的z-index，统一移除或调整为继承容器层级。

2. 动画失效问题 #

• 调整资源加载顺序：先加载jQuery，再加载GSAP，最后加载自定义动画代码，确保依赖库先完成初始化；
• 确保动画代码在DOM加载完成后执行：

// jQuery环境
jQuery(document).ready(function($){
  // 点击触发弹窗动画的代码放在这里
});

// 原生JS环境
document.addEventListener('DOMContentLoaded', function(){
  // 动画逻辑
});

• 核对GSAP的引入完整性，若使用模块化版本，需确保加载了TweenMax/TimelineMax等所需模块。

全屏模式失效补充 #

Codepen全屏模式失效本质还是资源加载问题，修复上述路径和依赖加载问题后，全屏模式即可正常运行。

内容的提问来源于stack exchange，提问作者Gema