为什么第一个模态的正文显示在第二个模态中？

Question

我想制作信息 windows 以便当您按下按钮时 - 将出现带有说明的信息 window。我写了一个最基本的模态弹窗window，复制了一下，但是出现了问题：第二个和所有后续弹出窗口中的描述）仅取自第一个模式 window，尽管另一个模式中的文本。我觉得自己像个彻头彻尾的白痴，但我已经尝试了一切，所以我不得不在这里寻求帮助...

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

每个 Button 和 Modal 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>

为什么第一个模态的正文显示在第二个模态中？

Why body from the first modal displayed in the second?

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3

bootstrap-4