ブートストラップのモーダル - モーダルIDが異なっても、1つしか正しく表示されない

Question

ブートストラップでこれらのモーダルに問題があります。私は両方のidを異なるように設定しましたが、 "more"ボタンが押されたときに最初のIDだけが表示されます。 2番目のボタンには、必要なモーダルが表示されません。

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

これらは登場しなければならないモーダルです。最初のモーダルは通常のように見えますが、2番目のモーダルは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

最初のモーダルに2つの閉じる</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>