升级jQuery与Bootstrap后无法通过jQuery打开Modal问题求助

问题原因 #

Bootstrap 5 彻底移除了对 jQuery 的依赖，原先基于 jQuery 的组件调用语法（$("#exampleModal").modal()）已经不再被支持，这就是升级后功能失效的核心原因。

解决方案 #

方案1：使用Bootstrap 5原生JS调用（推荐） #

直接改用Bootstrap 5官方的原生JavaScript API，替换原有jQuery代码：

// 获取模态框DOM元素
const modalEl = document.getElementById('exampleModal');
// 实例化模态框并触发显示
const modal = new bootstrap.Modal(modalEl);
modal.show();

方案2：保留jQuery环境下的调用 #

如果项目仍依赖jQuery，需确保加载顺序正确（先加载jQuery，再加载Bootstrap的bootstrap.bundle.min.js），然后用以下写法兼容：

$(function() {
  // 从jQuery对象中取出原生DOM元素，再用Bootstrap API处理
  const modal = new bootstrap.Modal($('#exampleModal')[0]);
  modal.show();
});

额外检查项 #

• 确认页面已正确引入Bootstrap 5的JS文件（必须是包含Popper的bootstrap.bundle.min.js，单独的bootstrap.min.js不包含依赖）
• 保证调用代码在模态框DOM元素加载完成后执行（比如放在页面底部，或包裹在DOMContentLoaded/$(function())中）
• 检查模态框的IDexampleModal是否和代码中的选择器完全匹配

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