点击按钮后Bootstrap模态框（Modal）无法正常显示问题咨询

问题原因&修复方案 #

• 属性命名空间错误：Bootstrap 5 所有内置 data 属性都添加了 bs 前缀，你当前使用的 data-toggle、data-target、data-dismiss 是 Bootstrap 4 及更早版本的旧属性，在 Bootstrap 5 环境中无法触发对应逻辑，需要替换为 data-bs-toggle、data-bs-target、data-bs-dismiss。
• 模态框结构错误：Bootstrap 模态框要求固定结构为 .modal > .modal-dialog > .modal-content，你当前代码里错误使用了 .dialog-content 类，缺少 modal-dialog 和 modal-content 两个必填结构类，导致样式和触发逻辑失效。

修正后的代码示例 #

触发按钮

<button id="upcomingCancel1" class="btn btn-danger my-1" data-bs-toggle="modal" data-bs-target="#upcomingModal1">
    <i class="bi bi-x me-1"></i>取消
</button>

模态框部分

<div id="upcomingModal1" class="modal fade" tabindex="-1" aria-labelledby="upcomingModalHeader1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="upcomingModalHeader1">取消配送</h5>
        <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">否</button>
        <button type="button" class="btn btn-primary">是</button>
      </div>
    </div>
  </div>
</div>

你原有引入的脚本不需要额外修改，jQuery 对 Bootstrap 5 不是必须依赖，保留也不会影响功能。原有 tooltip、popover 的初始化代码和模态框逻辑无关，无需调整。

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