Bootstrap 4模态框无法显示求助：点击H1触发模态框失效

嘿，我帮你梳理下几个大概率导致模态框失效的原因，一步步排查就能搞定：

1. 先确认依赖文件的加载顺序对不对 #

Bootstrap 4的模态框必须依赖jQuery和Popper.js才能正常工作，而且加载顺序绝对不能乱：

• 先加载jQuery
• 再加载Popper.js
• 最后加载Bootstrap的JS文件
  要是顺序搞反了或者漏了其中一个，模态框肯定是“罢工”的状态。你可以去检查下项目里的外部资源引入顺序，是不是符合这个要求。

2. 检查模态框的HTML结构是否符合Bootstrap规范 #

Bootstrap对模态框的结构有严格要求，少了层级或者属性不对都不行：

• 你的H1触发元素，必须加上data-toggle="modal"和data-target="#你的模态框ID"这两个属性，告诉Bootstrap点击它要触发哪个模态框
• 模态框容器得有class="modal fade"，还要设置唯一的ID，内部必须包含modal-dialog → modal-content → modal-header/modal-body/modal-footer这些层级

举个正确的例子：

<!-- 触发用的H1 -->
<h1 data-toggle="modal" data-target="#myModal">点击我弹出模态框</h1>

<!-- 模态框结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">这是模态框标题</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">关闭</button>
      </div>
    </div>
  </div>
</div>

3. 看看浏览器控制台有没有报错 #

按下F12打开开发者工具，切换到Console标签页，看看有没有红色的报错信息。比如如果jQuery没加载，会提示$ is not defined；要是结构写错了，也会有对应的提示，这些报错信息能直接帮你定位问题。

4. 检查H1元素是否能被正常点击 #

有时候可能是H1被其他元素挡住了，或者CSS里设置了pointer-events: none，导致点击事件无法触发。你可以右键H1选择“检查”，看看它的pointer-events属性是不是auto，也可以在页面上直接点击H1，看开发者工具的Elements里会不会高亮选中它，判断是不是真的点到了这个元素。

如果上面的都没问题，还可以试试用JS手动绑定事件测试，在页面底部加这段代码：

$('h1').click(function() {
  $('#myModal').modal('show');
});

要是这样能弹出模态框，说明是data-*属性的绑定有问题；要是还是不行，那基本就是依赖或者结构的问题没解决啦。

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