使用jQuery Modal插件时，setTimeout触发$(...).modal is not a function错误求助

我在网站上使用一款jQuery Modal插件实现弹窗效果，想要页面加载后延迟5秒显示弹窗，但用setTimeout时一直报错：Uncaught TypeError: $(...).modal is not a function，不使用延迟方法时一切正常。另外把代码放window.onload里也不行。

我的HTML代码：

<div id="ex1" class="modal">
  <div class="modal-content">
  </div>
</div>

我的JS代码：

setTimeout(() => {
 $('#ex1').modal({
    fadeDuration: 500,
    showClose: false
 );
}, 5000)

解决步骤 #

1. 先修正语法错误
   你当前的JS代码里，modal()的配置对象后缺少闭合的}，导致代码解析失败，正确写法：

   setTimeout(() => {
     $('#ex1').modal({
        fadeDuration: 500,
        showClose: false
     });
   }, 5000)
   

2. 排查加载顺序与作用域问题
   如果语法修正后仍报错，按以下方向排查：

   • 确保脚本加载顺序正确：先加载jQuery，再加载Modal插件的JS文件，最后加载你的自定义脚本。示例顺序：

     <script src="jquery.min.js"></script>
     <script src="jquery.modal.min.js"></script>
     <script src="你的自定义脚本.js"></script>
     

   • 检查jQuery冲突：如果页面存在其他类库占用$，替换为jQuery测试：

     setTimeout(() => {
       jQuery('#ex1').modal({
         fadeDuration: 500,
         showClose: false
       });
     }, 5000)
     

   • 模块化环境适配：如果用Webpack等模块化工具，确保插件正确挂载到jQuery：

     import $ from 'jquery';
     import 'jquery-modal';
     
     setTimeout(() => {
       $('#ex1').modal({
         fadeDuration: 500,
         showClose: false
       });
     }, 5000)
     

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