Bootstrap Modal与FullCalendar冲突报错：0x800a01b6

这个问题我之前在项目里也踩过坑，核心原因就是jQuery的加载顺序不对或者重复引入了不同版本的jQuery，导致Bootstrap的modal方法被覆盖或者找不到正确的jQuery实例。下面给你一步步的解决方案：

1. 调整脚本加载顺序（最有效的解决方法） #

FullCalendar和Bootstrap都依赖jQuery，但两者对jQuery的调用顺序有严格要求，正确的加载顺序必须是：

• 先加载jQuery
• 然后加载Bootstrap的JavaScript文件
• 最后加载FullCalendar的JavaScript文件

为啥要这么排？因为Bootstrap会把modal这类方法挂载到当前的jQuery实例上，而FullCalendar初始化时会使用当前的jQuery环境。如果先加载FullCalendar再加载Bootstrap，会导致Bootstrap覆盖掉FullCalendar依赖的jQuery实例；反过来先加载Bootstrap再加载FullCalendar，就会让Bootstrap的方法能被后续代码正常访问。

示例代码如下：

<!-- 第一步：加载jQuery -->
<script src="path/to/jquery.min.js"></script>

<!-- 第二步：加载Bootstrap JS -->
<script src="path/to/bootstrap.min.js"></script>

<!-- 第三步：加载FullCalendar JS -->
<script src="path/to/fullcalendar.min.js"></script>

2. 检查是否重复引入jQuery #

有时候FullCalendar的打包文件可能自带了jQuery，或者你自己在页面里不小心引入了多个不同版本的jQuery，这会导致：

• Bootstrap把modal方法绑定到第一个jQuery实例上
• 你的业务代码或者FullCalendar使用了第二个jQuery实例，自然找不到modal方法

检查方法： #

打开浏览器开发者工具（按F12），切换到Console标签，输入：

jQuery.fn.jquery

查看输出的版本号，然后检查页面里所有的<script>标签，确保只保留一个兼容的jQuery版本（建议选择同时支持你使用的Bootstrap版本和FullCalendar版本的jQuery，比如Bootstrap 3推荐jQuery 1.9.1+，FullCalendar 5+推荐jQuery 3.5+）。

3. 万不得已时使用jQuery.noConflict()（不推荐） #

如果因为某些限制必须加载多个jQuery版本，可以用noConflict()来隔离不同的jQuery实例：

<!-- 加载第一个jQuery版本，用于Bootstrap -->
<script src="path/to/jquery-1.12.4.min.js"></script>
<script>
  // 把这个jQuery实例保存为变量，释放$和jQuery的控制权
  var bsJquery = jQuery.noConflict(true);
</script>

<!-- 加载Bootstrap，它会绑定到bsJquery上 -->
<script src="path/to/bootstrap.min.js"></script>

<!-- 加载第二个jQuery版本，用于FullCalendar -->
<script src="path/to/jquery-3.6.0.min.js"></script>
<script src="path/to/fullcalendar.min.js"></script>

<!-- 调用Modal时，要使用bsJquery而不是默认的$ -->
<script>
  bsJquery('#myModal').modal('show');
</script>

这个方法比较繁琐，容易出错，所以优先推荐前面两种方案。

4. 确保DOM加载完成后再调用方法 #

最后，不管是初始化FullCalendar还是调用Modal，都要确保在DOM加载完成后执行，比如用$(document).ready()包裹：

$(document).ready(function() {
  // 初始化FullCalendar
  $('#calendar').fullCalendar({
    // 配置项
  });

  // 调用Modal
  $('#openModalBtn').click(function() {
    $('#myModal').modal('show');
  });
});

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