Bootstrap5Modal无法显示的解决方法

有志者，事竟成！如果你在学习文章，那么本文《Bootstrap 5 Modal 不显示的解决方法》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

Bootstrap 5 已弃用 `data-toggle` 和 `data-dismiss` 等旧版 data 属性，改用带 `bs-` 前缀的新属性（如 `data-bs-toggle`），若未更新会导致 Modal 完全无响应且控制台静默报错。

在 Bootstrap 5 中，Modal 组件的 JavaScript 行为完全依赖于语义化、版本特定的 data-* 属性。你提供的代码中使用的是 Bootstrap 4 风格的 data-toggle="modal" 和 data-dismiss="modal"，而当前引入的是 Bootstrap 5.x 的 CSS 和 JS（通过 @popperjs/core 和 bootstrap@5.x CDN），属性名不匹配将导致事件绑定失败，Modal 无法触发——这也是为什么点击按钮毫无反应、控制台也无报错（因逻辑被静默忽略）。

✅ 正确写法（Bootstrap 5+）

将按钮和关闭按钮中的 data-toggle / data-dismiss 替换为带 bs- 前缀的新属性：

<!-- 启动 Modal 的按钮 -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal 内部的关闭按钮 -->
<button type="button" class="close" 
        data-bs-dismiss="modal" 
        aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

? 提示：Bootstrap 5 移除了对 jQuery 的依赖，因此无需额外引入 jQuery（尽管你已引入，但不会干扰；不过建议移除以避免潜在冲突或冗余加载）。

? 完整修正后的关键片段（仅展示需修改部分）

<!-- 按钮（修复后） -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal 结构（仅修正关闭按钮） -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
     aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <!-- ✅ 关键修复：使用 data-bs-dismiss -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

? 推荐升级细节：

• 使用 替代自定义 × 关闭图标（更语义化、自动适配 RTL 和无障碍）；
• 确保 Bootstrap 5 的 JS 文件在所有自定义脚本之后加载；
• 若使用构建工具（如 Webpack/Vite），请确认未混用 Bootstrap 4 和 5 的模块。

⚠️ 其他常见排查点

• 检查 Bootstrap 版本一致性：确保 引入的 CSS 与