bootstrap 5 中模态框（modal）无法触发，通常是因为仍使用了 bootstrap 4 的 data-toggle 和 data-target 属性，而 bootstrap 5 已将其替换为带 bs- 前缀的新属性。
在你提供的代码中，按钮使用的是旧版 Bootstrap 4 的数据属性：
但你的项目引入的是 Bootstrap 5.x（从 CDN 路径 @popperjs/core@2 和 bootstrap@5 可确认），而 Bootstrap 5 完全移除了 data-toggle 和 data-target，改用语义更清晰、命名空间更明确的 data-bs-toggle 和 data-bs-target。同理，关闭按钮也需将 data-dismiss="modal" 改为 data-bs-dismiss="modal"。
✅ 正确写法如下：
⚠️ 注意事项：
- 确保 Bootstrap 5 的 JavaScript 文件已正确加载，且依赖的 Popper.js（已内置在 bootstrap.min.js 中）无需单独引入；
- jQuery 不是必需的：Bootstrap 5 默认使用原生 JavaScript，已移除对 jQuery 的依赖。你当前引入了 jQuery（jquery-3.6.3.min.js），虽不会报错，但属于冗余资源，建议移除以提升性能和避免潜在冲突；
- 检查浏览器控制台是否启用“Preserve log”，防止模态框快速打开又关闭导致误判；
- Modal 的 HTML 结构必须位于 内（你的代码符合），且 id="exampleModal" 必须与 data-bs-target 的值严格一致（区分大小写、无空格）。
? 完整修复后的关键片段（仅展示修改部分）：
Modal title
? 提示：Bootstrap 5 推荐使用 替代自定义 ×，它自带样式和无障碍支持；若需保留 × 符号，仍可继续使用 ，但务必确保 data-bs-dismiss="modal" 存在。
总结：升级到 Bootstrap 5 后，请统一将所有 data-toggle → data-bs-toggle、data-target → data-bs-target、data-dismiss → data-bs-dismiss。这是最常见也最容易被忽略的迁移问题——看似微小的属性名变更，却直接导致交互功能失效。
