点击按钮无法触发Bootstrap Modal弹窗问题排查求助

常见失效原因 #

• 依赖缺失/加载顺序错误
  Bootstrap模态框依赖JS组件才能触发，你目前只写了HTML结构，大概率是没有正确引入必要的JS资源，或资源加载顺序错误。Bootstrap 4的模态框需要按顺序引入jQuery、Popper.js、Bootstrap自身的JS文件，只引入Bootstrap CSS无法触发弹窗功能。
• Bootstrap版本与代码语法不匹配
  你提供的代码是Bootstrap 4的写法，如果你引入的是Bootstrap 5的资源，语法规则有变动：原data-toggle、data-target、data-dismiss属性都需要加bs前缀，改为data-bs-toggle、data-bs-target、data-bs-dismiss，否则无法识别。
• Flask静态资源路径错误
  如果你的Bootstrap资源是放在本地static文件夹下引入的，要检查url_for路径是否配置正确，浏览器按F12打开开发者工具，看网络标签有没有资源加载404报错，确认CSS、JS资源都成功加载。
• 资源重复引入冲突
  如果页面重复引入了jQuery或Bootstrap JS文件，会导致功能冲突，模态框无法正常触发。

修复方案 #

如果你使用Bootstrap 4 #

首先在HTML的</body>标签前按顺序引入对应JS资源，Flask本地引入示例：

<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

确认引入后原有HTML代码无需修改即可正常触发。

如果你使用Bootstrap 5 #

先确认引入了Bootstrap 5的CSS和JS资源，再将原有代码的对应属性替换即可：
按钮修改为：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

所有关闭按钮的data-dismiss属性全部替换为data-bs-dismiss即可。

排查技巧 #

按F12打开浏览器开发者工具，切换到Console标签，查看有没有JS报错：

• 提示$ is not defined：jQuery未引入或加载顺序错误
• 提示模态框相关方法未定义：Bootstrap JS未引入或版本不匹配
• 提示资源加载失败：检查Flask static文件夹路径配置是否正确

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