BootStrap 4 加载外部HTML作为Modal内容报错如何解决

AI 小北

2026-9-30

问题解决指南

报错核心原因

你遇到的load is not a function报错90%以上是因为引入了jQuery Slim版本：Bootstrap 官方默认提供的配套jQuery slim版裁剪了AJAX相关功能，load()方法属于被裁剪的范围，所以无法调用。除此之外还可能存在依赖引入顺序错误、属性使用不规范的问题。

分步解决步骤

1. 修正依赖引入

替换页面中的jQuery slim版为完整版，注意引入顺序不能出错：

<!-- 第一步引入jQuery完整版 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 第二步引入Bootstrap 4的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

注：bootstrap.bundle.min.js已内置popper.js，无需额外单独引入

2. 修正按钮属性

button元素本身不支持原生href属性，同时要移除自带的modal触发属性避免和自定义JS冲突，修改后的按钮代码如下：

<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" data-href="contact.html">Sign Up</button>

3. 替换JS逻辑

调整执行顺序，先加载内容再显示模态框，避免重复触发modal初始化：

$('.signup').on('click', function(e){
  e.preventDefault();
  const targetPage = $(this).data('href');
  // 先把目标页面内容加载到模态框容器，加载完成后再弹出模态框
  $('#theModal .modal-content').load(targetPage, function() {
    $('#theModal').modal('show');
  });
});