Twitter bootstrap 为什么身体从第一模态显示在第二模态？

我想创建一个信息窗口，这样当你按下按钮时，一个带有描述的信息窗口就会出现。我编写了最基本的模式弹出窗口，复制了它，但出现了一个问题： 第二个窗口（以及所有后续弹出窗口）中的描述仅取自第一个模式窗口，尽管另一个窗口中的文本是。我觉得自己像个十足的白痴，但我已经尝试了一切，所以我不得不在这里寻求帮助

以下是JSFIDLE示例-

以下是代码：

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Title 1</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Header:</h4>
</div>
<div class="modal-body">Message - 1</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>

标题1
×
标题：
信息-1
接近

每个按钮和模式

div

必须具有唯一且相同的ID：

标题2

---

您没有更改第二个按钮的

数据目标

属性和

div

类

。这就是您在两个按钮上查看相同内容的原因

签出此：

代码：

标题1
×
标题：
信息-1
接近
标题2
×
标题：
信息-2
接近

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Title 1</button>
 <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="dialog">
  <div class="modal-content">
  <div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
    <h4 class="modal-title">Header:</h4>
  </div>
<div class="modal-body">Message - 1</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal2">Title 2</button>
<div id="myModal2" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Header:</h4>
</div>
<div class="modal-body">Message-2</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>