模态-标题，如何拥有多个且所有模态的标题不同

Question

我目前有三个模态，它们在按下按钮时弹出，但是它们都共享相同的模态标题，这是三个模态中的第一个。由于这三个情态词与不同的主题相关，所以我想设置三个不同的标题，但它们是相同的。所以有三个模态，所有弹出窗口都可以正常工作和关闭，并显示信息，但是它们的标题与第一个保持不变，提前感谢您对这个最可能简单的问题的帮助(请忽略拼写，我还没有通过拼写检查器来处理所有问题；下面是三个模态：

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;
   </button>
    <h4 class="modal-title">Scratch Programming course</h4>
  </div>
  <div class="modal-body">
    <p>Our Scratch programming course runs through the first semester of school, a ten week course with two lessons per week.</p>
      <p>
      Designed to teach key skills, such as: Problem solving skills, logical thinking, and most importantly, having fun!
      </p>
      <p>
      Scratch enables the children to learn a variety of key skills for programming, which are transferable to other subjects. Conveyed in a fun and approachable manor (their favourit cartoons and games), so that its possible to have fun while they learn key concepts.
      </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>

   </div>
  </div>
 </div>   

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;    
       </button>
    <h4 class="modal-title">Stencyl Programming course</h4>
  </div>
  <div class="modal-body">
    <p>Our Stencyl programming course runs through the second semester of school, a ten week course with two lessons per week. The same as that of the Scratch course.</p>
      <p>
      Designed to cement and develop key skills, such as: Problem solving skills, logical thinking, programatical approach to thinking and also thinking outside of the box.
      </p>
      <p>
      Stencyl enables the students to develop their skills in regards to programming, and also aid in the development of their other skills which are transferable. Stencyl is still an approach used to remain underwhelming on the students behalf, conveyed once again in a fun and simple way, rather than throwing the children in the deep end, allowing them to further cement their knowledge before jumping in to their first programmatical language, Python.
      </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
 </div>

 </div>
</div>

<!-- Modal -->
 <div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;    
    </button>
    <h4 class="modal-title">Python Programming Course</h4>
  </div>
  <div class="modal-body">
    <p>Our Python programming course runs through the third and final semester of the school, a ten week course with two lessons per week. The same as that of the Scratch course.</p>
      <p>
      Designed to cement and develop key skills, such as: Problem solving skills, logical thinking, programatical approach to thinking and also thinking outside of the box.
      </p>
      <p>
      Stencyl enables the students to develop their skills in regards to programming, and also aid in the development of their other skills which are transferable. Stencyl is still an approach used to remain underwhelming on the students behalf, conveyed once again in a fun and simple way, rather than throwing the children in the deep end, allowing them to further cement their knowledge before jumping in to their first programmatical language, Python.
      </p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-   
    dismiss="modal">Close</button>
  </div>
 </div>

 </div>
 </div>
 </div>    

Answer 1

这很可能是由模态上的重复id引起的。每个id都应该是唯一的。

另外，您还有两个额外的结束div标记。一个在第一个情态之后，另一个在第三个情态之后。