Bootstrap 5模态框点击按钮不显示问题求助

问题描述 #

按Bootstrap 5官方文档写的静态背景模态框，按钮能正常显示，但点击后没反应。把属性里的-bs后缀去掉后，模态框反而能正常弹出来了——可明明记得Bootstrap 5要求用带-bs的属性，而且我页面里另一个注销确认的模态框用带-bs的属性是能正常工作的。

用到的代码如下：

按钮代码 #

<div class="col-12 offset-md-10">  
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">   Launch static backdrop modal 
 </button> 
</div>

模态框代码 #

<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true" style="display: none;">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> 
     </button>
    </div>
    <div class="modal-body">
    <p>I will not close if you click outside of me. Don't even try to press escape key.</p>
    </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">Understood</button>
  </div>
 </div>
</div>
</div>

原因分析 #

• 版本冲突：页面里可能同时引入了Bootstrap 4和Bootstrap 5的JS文件。Bootstrap 4用不带-bs的属性（比如data-toggle），Bootstrap 5用带-bs的，两者混在一起会触发旧版逻辑，导致带-bs的属性不被识别。
• JS加载异常：Bootstrap 5的模态框依赖Popper.js和自身JS组件，如果加载顺序错误（比如Bootstrap JS比Popper先加载），或者JS文件路径错误、未加载完全，都会导致带-bs的属性无法触发模态框。
• 自定义代码干扰：页面中的自定义JS可能覆盖了Bootstrap 5的模态框触发逻辑，导致带-bs的属性失效，但旧版属性仍能生效。
• 手动样式干扰：Bootstrap 5的模态框默认通过fade类和JS控制显示状态，手动添加的style="display: none;"可能打乱了JS的状态切换逻辑。

解决方案 #

• 清理版本冲突：只保留Bootstrap 5的CSS和JS文件，移除所有Bootstrap 4相关资源。
• 修正JS加载顺序：先加载Popper.js，再加载Bootstrap 5的JS文件；同时检查浏览器控制台的报错信息，修复资源路径问题。
• 排查自定义代码：暂时注释掉页面中的自定义JS代码，测试模态框是否正常工作，逐步定位并修改冲突的代码。
• 移除手动样式：删掉模态框标签中的style="display: none;"属性，让Bootstrap自身控制显示状态。

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