Bootstrap 3.3.7点击按钮触发对应模态框时所有模态框均弹出求助

嘿，刚上手Bootstrap碰到这种小问题太正常了！我帮你梳理下最可能踩的几个坑，照着排查应该就能搞定：

最常见的原因：模态框ID重复 #

Bootstrap是通过唯一ID来识别要触发的模态框的。如果你复制模态框代码后没修改ID，比如多个模态框都用了#myModal，那点击任何指向这个ID的按钮时，所有匹配该ID的模态框都会被唤起。

解决办法： #

给每个模态框设置独一无二的ID，比如#modal-user-info、#modal-settings，然后对应按钮的data-target要精准匹配这个ID（别忘了加#哦）。

按钮的data-target写错了 #

比如你不小心把data-target设成了类选择器.modal，而不是ID选择器#your-modal-id。用类选择器的话，页面上所有带.modal类的元素都会被触发，自然就全弹出来了。

另外还要检查是不是所有按钮的data-target都误写成了同一个ID，这种低级失误新手很容易犯😉。

自定义JS代码误触发所有模态框 #

如果你自己写了JavaScript代码，比如不小心写了：

$('.modal').modal('show');

不管点击哪个按钮，这段代码都会触发所有模态框。赶紧检查下你的自定义脚本，有没有这种全局触发的代码。

正确的示例代码参考 #

这里给你一个简单的双模态框示例，照着这个结构写就不会错：

<!-- 按钮1 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">
  打开第一个模态框
</button>

<!-- 模态框1 -->
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="modal1Title" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal1Title">模态框1</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>
  </div>
</div>

<!-- 按钮2 -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal-2">
  打开第二个模态框
</button>

<!-- 模态框2 -->
<div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="modal2Title" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal2Title">模态框2</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>
  </div>
</div>

总结一下，核心就是：ID唯一、data-target精准对应、避免全局触发，排查这几点应该就能解决你的问题啦！

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