You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

已引入相关脚本与CSS,Bootstrap Modal弹窗仍无法正常工作

Bootstrap 5 Modal无法正常触发的修复方案

你的代码核心问题是混用了Bootstrap 4和Bootstrap 5的语法——你引入的是Bootstrap 5.2.0,但用的是Bootstrap 4的data属性规则,这导致弹窗的触发逻辑完全失效。需要修改以下几处:

  • 触发按钮的属性:data-toggle → data-bs-toggle,data-target → data-bs-target
  • 模态框内关闭按钮的属性:data-dismiss → data-bs-dismiss
  • 移除冗余的role="dialog"和role="document"属性(Bootstrap 5已不再依赖这些旧的语义化标记)
  • 可选优化:Bootstrap 5的bootstrap.bundle.min.js已包含Popper.js,且不再强制依赖jQuery,可移除单独引入的Popper和jQuery文件

修正后的完整代码:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>

  <body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            Test
          </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>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.bundle.min.js" integrity="sha512-9GacT4119eY3AcosfWtHMsT5JyZudrexyEVzTBWV3viP/YfB9e2pEy3N7WXL3SV6ASXpTU0vzzSxsbfsuUH4sQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </body>
</html>

内容的提问来源于stack exchange,提问作者Mugen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 08:09:22