弹窗联系表单JS报错“$ is not defined”问题求助

你的代码里的$是jQuery库的简写别名，之所以在CodePen里能正常运行，是因为CodePen默认帮你自动引入了jQuery；但你的个人网站没有加载这个库，浏览器根本不知道$是什么，所以才会报错。

最快的解决方法：手动引入jQuery库 #

在你的HTML文件里，把jQuery的脚本放在你自己的弹窗JS代码之前，确保浏览器先加载jQuery，再执行你的代码。

示例代码（直接用CDN引入）：

<!-- 先引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 再放你自己的弹窗表单JS代码 -->
<script>
$(function() {
    $('#contact').click(function() {
      $('#contactForm').fadeToggle();
    })
    $(document).mouseup(function (e) {
      var container = $("#contactForm");
  
      if (!container.is(e.target) 
          && container.has(e.target).length === 0)
      {
          container.fadeOut();
      }
    });    
  });
</script>

关键注意点 #

• 必须保证jQuery的引入代码在你的自定义JS代码前面，顺序错了依然会报错。
• 如果你不想用jQuery，也可以把代码改成原生JavaScript实现，但需要自己处理DOM操作和动画效果，对新手来说门槛稍高。

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