Bootstrap Modals - Modal id的不同但只有一個正確顯示

Question

我在引導程序中遇到了這些模式的問題。我已經設置了不同的ID，但只有第一個按下「更多」按鈕時出現。第二個按鈕不顯示所需的模式。

<div id="tf-team" class="text-center"> 
 
<div class="overlay" id="team1"> 
 
<div class="container"> 
 
\t <div class="section-title center"> 
 
\t \t <h4>Something</h4> 
 
\t \t <h2 class="white">The Team</h2> 
 
\t \t <img src="img/daag.png" alt=""> 
 
\t </div> 
 
</div> 
 
<div id="team" class="owl-carousel owl-theme row"> 
 
\t <!-- Team One --> 
 
\t <div class="item"> 
 
\t \t <div class="thumbnail"> 
 
\t \t \t <img src="img/team/01.jpg" alt="..." class="img-circle team-img"> 
 
\t \t \t <div class="caption"> 
 
\t \t \t \t <h3>CEO name</h3> 
 
\t \t \t \t <p class="blue">CEO</p> 
 
\t \t \t \t <button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <!-- Team Two --> 
 
\t <div class="item"> 
 
\t \t <div class="thumbnail"> 
 
\t \t \t <img src="img/team/03.jpg" alt="..." class="img-circle team-img"> 
 
\t \t \t <div class="caption"> 
 
\t \t \t \t <h3>Marketing Executive name</h3> 
 
\t \t \t \t <p class="blue">Marketing Executive</p> 
 
\t \t \t \t <button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

這些是應該出現的情態動詞。第一個模式顯示爲正常，但第二個模式即使ID不同也是如此。

<!-- Modal One--> 
 
<div id="myModal1" class="modal fade" role="dialog"> 
 
<div class="modal-dialog"> 
 
\t <div class="modal-content"> 
 
\t \t <div class="modal-header"> 
 
\t \t \t <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
\t \t \t <h4 class="modal-title">text</h4> 
 
\t \t </div> 
 
\t \t <div class="modal-body"> 
 
\t \t \t <p><strong>text</strong></p> 
 
\t \t \t <p>text</p> 
 

 
\t \t \t <p><strong>text</strong></p> 
 
\t \t \t <p>text 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t \t <div class="modal-footer"> 
 
\t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
\t \t </div> 
 
\t </div> 
 
<!-- Modal Two--> 
 
<div id="myModal2" class="modal fade" role="dialog"> 
 
\t <div class="modal-dialog"> 
 
\t \t <div class="modal-content"> 
 
\t \t \t <div class="modal-header"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
\t \t \t \t <h4 class="modal-title">Dana</h4> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-body"> 
 
\t \t \t \t <p><strong>text</strong></p> 
 
\t \t \t \t <p>text 
 
\t \t \t \t </p> 
 
\t \t \t \t <p><strong>text Tick</strong></p> 
 
\t \t \t \t <p>text 
 
\t \t \t \t </p> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-footer"> 
 
\t \t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

沒有人有任何想法，爲什麼發生這種情況？

Answer 1

你只是錯過了第一個模態的兩個關閉</div>標籤。

<script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 

 
<div id="tf-team" class="text-center"> 
 
    <div class="overlay" id="team1"> 
 
     <div class="container"> 
 
     <div class="section-title center"> 
 
      <h4>Something</h4> 
 
      <h2 class="white">The Team</h2> 
 
      <img src="img/daag.png" alt=""> 
 
     </div> 
 
     </div> 
 
     <div id="team" class="owl-carousel owl-theme row"> 
 
     <!-- Team One --> 
 
     <div class="item"> 
 
      <div class="thumbnail"> 
 
      <img src="img/team/01.jpg" alt="..." class="img-circle team-img"> 
 
      <div class="caption"> 
 
       <h3>Jim Rae</h3> 
 
       <p class="blue">CEO</p> 
 
       <button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Team Two --> 
 
     <div class="item"> 
 
      <div class="thumbnail"> 
 
      <img src="img/team/03.jpg" alt="..." class="img-circle team-img"> 
 
      <div class="caption"> 
 
       <h3>Dana Apatachioae</h3> 
 
       <p class="blue">Marketing Executive</p> 
 
       <button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- Modal One--> 
 
     <div id="myModal1" class="modal fade" role="dialog"> 
 
      <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">text</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
       <p><strong>text</strong> 
 
       </p> 
 
       <p>text</p> 
 

 
       <p><strong>text</strong> 
 
       </p> 
 
       <p>text 
 
       </p> 
 
       </div> 
 
       <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
      <!-- You are missing these two ending </div> tags. --> 
 
      </div> 
 
     </div> 
 

 
     <!-- Modal Two--> 
 
     <div id="myModal2" class="modal fade" role="dialog"> 
 
      <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Dana</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
       <p><strong>text</strong> 
 
       </p> 
 
       <p>text 
 
       </p> 
 
       <p><strong>text Tick</strong> 
 
       </p> 
 
       <p>text 
 
       </p> 
 
       </div> 
 
       <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div>