Bootstrap 4.6.2 Modal无法正常触发问题求助

1. 先改最明显的ID匹配错误 #

你触发按钮的data-target="#testing"，但Modal的id是exampleModal，两者完全不匹配，这是Modal没反应的核心问题！

同时注意无障碍属性aria-labelledby要对应Modal标题的id，修正后的代码如下：

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2. 检查Bootstrap依赖加载顺序 #

Bootstrap 4.6.2必须依赖jQuery 1.9.1+和Popper.js，加载顺序不能乱：

1. 先加载jQuery
2. 再加载Popper.js
3. 最后加载Bootstrap JS

可以打开浏览器控制台，输入jQuery和bootstrap，能正常输出对应对象就说明依赖加载成功；如果提示“未定义”，就是加载环节出了问题。

3. 排查页面JS冲突 #

站点如果用了Prototype、Zepto这类其他JS库，可能和jQuery冲突，导致Bootstrap的事件绑定失效：

• 试试jQuery无冲突模式：jQuery.noConflict();，确保Bootstrap在这之后初始化
• 仔细检查控制台：有时候表面无报错，但点击按钮时可能出现未捕获的错误，刷新页面后再点击按钮查看Console面板

4. 检查Modal的CSS是否被覆盖 #

如果Modal被其他CSS强制设置为display: none !important，就算触发逻辑生效也看不到弹窗。可以打开浏览器Elements面板找到Modal元素，查看它的计算样式，确认点击按钮后display属性会从none变为block。

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