求助：Modal弹窗无法切换且始终显示，无法关闭

阿华AIGC实验室

2026-5-12

解决Modal弹窗始终显示且无法切换的问题

看起来你遇到的问题根源是没有引入Bootstrap的样式文件和JavaScript文件——你用了Bootstrap Modal组件相关的data-toggle、data-dismiss这些自定义属性，但这些交互功能需要Bootstrap的JS来实现，同时Modal的初始隐藏状态也依赖Bootstrap的CSS支持。

下面是修复后的完整代码，我帮你补充了必要的依赖资源，还做了几个小优化方便测试：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Bootstrap CSS，控制Modal的初始隐藏样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <!-- 给按钮添加文字，方便点击测试 -->
  <button class="btn btn-primary" data-target="#campModal" data-toggle="modal">打开弹窗</button>
  
  <div class="modal" id="campModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Create</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <input type="text" name="Name" id="name" placeholder="输入名称"/>
            </div>
            <div class="form-group">
              <input type="text" name="Password" id="password" placeholder="输入密码"/>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">Submit</button>
          <!-- 把关闭按钮改成默认样式，符合Bootstrap视觉规范 -->
          <button class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 先引入jQuery（Bootstrap 3的JS依赖jQuery），再引入Bootstrap JS处理交互逻辑 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>

需要注意几个核心点：

Bootstrap 3版本的Modal必须依赖jQuery，所以一定要先引入jQuery，再引入Bootstrap的JS文件
.modal类在Bootstrap CSS中默认是display: none，没有加载CSS的话弹窗会一直显示在页面上
data-toggle="modal"和data-dismiss="modal"这些属性的点击逻辑，完全由Bootstrap的JS来实现，没有JS的话点击按钮不会有任何反应

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