为什么从第一个模态显示在第二个模态？

Question

我想制作信息窗口，以便当您按下按钮时-将会显示带有说明的信息窗口。我写了最基本的模式弹出窗口，重复了一下，但是有一个问题：尽管第二个弹出窗口中的文本在另一个窗口中，但仅从第一个模式窗口中进行了描述。我觉得自己是个白痴，但是我已经尝试了所有方法，因此我必须在这里寻求帮助...

这里是jsfiddle示例-https://jsfiddle.net/rw5np6jv/1/

这里是代码：

<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>

Answer 1

每个按钮和模式div必须具有唯一且相同的ID：

<button data-target="#myModal_2" ...>Title 2</button>
<div id="myModal_2" ...>

https://jsfiddle.net/6mqty0oh/

Answer 2

您没有更改第二个按钮的data-target属性和div class。这就是为什么您要在两个按钮上查看相同内容的原因。

签出此：https://jsfiddle.net/o8d4fjLx/

代码：

<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>