FullCalendar customButton点击触发模态框报modal未定义错误

控制台抛出Uncaught TypeError: $(...).modal is not a function的本质为Bootstrap资源版本错配、JS加载顺序混乱，导致modal方法未正确挂载到jQuery实例上：

• 页面CSS引入Bootstrap 4.1.3版本，JS却加载了不兼容的Bootstrap 3.3.7版本，两个大版本的DOM操作命名空间互相冲突
• 错配的资源加载完成后，Bootstrap 3的内置方法无法适配Bootstrap 4的DOM结构，最终造成modal方法失效
• FullCalendar脚本在Bootstrap JS之后加载，进一步放大了命名空间冲突的影响

• 第一步：移除版本不兼容的冗余资源
  直接删除head标签内引入的Bootstrap 3.3.7版本JS文件，严禁在同一页面同时加载两个大版本的Bootstrap脚本。
• 第二步：统一Bootstrap版本，匹配对应资源
  补充引入和已加载的Bootstrap 4.1.3 CSS完全对应版本的Bootstrap JS文件，确保CSS和JS版本号完全一致，避免样式和逻辑脱节。
• 第三步：调整所有脚本的加载优先级，严格遵循依赖顺序
  正确的加载顺序为：基础meta信息 → 所有第三方/业务CSS资源 → jQuery库 → 对应版本的Bootstrap JS → FullCalendar相关JS。
  调整后的head内资源参考代码如下：

  <!-- 基础元信息 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>HRIS - Dashboard</title>
  <!-- 全量CSS资源 -->
  <link href="~/Content/dboardStyle.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
  <link href="~/Content/fullcalendar/lib/main.css" rel="stylesheet" />
  <link href="~/Content/fullcalendar/calendarCss.css" rel="stylesheet" />
  <!-- 全量JS资源，按依赖优先级加载 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="~/Content/fullcalendar/lib/main.js"></script>
  <script src="~/Content/fullcalendar/js/theme-chooser.js"></script>
  

• 第四步：修正FullCalendar自定义按钮的触发逻辑
  原有自定义按钮的结构不需要大改，仅需补充方法存在性判断，避免因局部作用域问题导致的报错，修正后的按钮配置如下：

  customButtons: {
      AddEvent: {
          text: 'Add Event',
          click: function () {
              $('#ModalTitle').html('Add New Event');
              // 校验modal方法是否存在，避免异常中断
              if ($.isFunction($('#MyModal').modal)) {
                  $('#MyModal').modal('show');
              }
          }
      }
  },
  

• 严禁同时加载Bootstrap 3和Bootstrap 4的JS文件，两个版本会互相覆盖jQuery上挂载的同名方法，大概率导致功能失效
• 确保jQuery在所有依赖它的脚本（Bootstrap JS、jQuery-confirm、FullCalendar）之前加载，否则所有基于jQuery的插件方法都会失效
• 如果页面使用了其他会占用$变量的库，可以在触发模态框的地方换成jQuery代替$，避免变量被覆盖的问题
• 原有的模态框HTML结构符合Bootstrap4的规范，不需要额外修改，只要资源版本匹配，就能正常实现弹出、关闭交互

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