モーダルはPHPエコー後に一度だけ表示されます

Question

モーダルは特定のボタンでヒットしたときにモーダルポップアップを作成しようとしていますが、モーダルは一度だけ表示されます.2つの異なるPHPファイルがあります。特定div .BelowがPHP第二のファイルのコードである：

echo '       
    <div class="row top-buffer"> 
    <div class="articles"> 
     <div class="col-md-6"> 
     <img class="img-rounded" src="'. $image .'" alt="MyImage" width="550px" height="240px"/> 
     </div> 
     <div class="col-md-6"> 
    <p style="font-size: 22px;font-weight: normal;color:#7f8c8c">'. $title .'</p> 
    <p id="article_p" style="max-width:550px;max-height:140px">'. $description .'...</p>    
     <div class="row top-buffer"> 
     <div class="col-md-6"> 
     <img src="img/link_icon.png" class="img-rounded"/> 
     <a href="www.link.com"><span style="font-size: 20px;font-weight: normal;margin-left: 2%">www.link.com</span></a> 
             </div> 
      <div class="col-md-6"> 
      <button class="btn btn-primary pull-right" id="label3">View Details</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div>'; 

    echo '<!-- Modal --> 
     <div class="modal fade" id="modelWindow" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">'. $title .'</h4> 
     </div> 
     <div class="modal-body"> 
     <img class="img-rounded" src="'. $image .'" alt="MyImage" width="550px" height="240px"> 
      <p class="well">'. $description .'<p> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
          </div> 
         </div> 
       </div> 
      </div> 
       <!-- End Of Modal --> '; 
    }; 


    echo '<script type="text/javascript"> 
    $("#label3").click(function() { 
    $("#modelWindow").modal("toggle"); 
    }); 
    </script>'; 

だからs.Theは、最初のコンテンツのために、第二がモーダルであり、第3は、私はモーダルを前記modal.Asをトリガ3 echo」が存在しますのみがと表示され、理由を理解できません。jsまたはを含める必要がありますこのファイルのファイルはです。どんな考えも参考になります。

Answer 1

コードは実際にうまくいきます。私は以下のように偽のコンテンツをまとめようとします。 HTMLコードに追加したjsファイルとcssファイルを確認します。

UPDATED：コードの4つのボタンと4つのモーダルを入れようとしました。これが役に立つと分かっているかどうかはわかりません。

$("#label1").click(function() { 
 
    $("#modelWindow_1").modal("toggle"); 
 
}); 
 

 
$("#label2").click(function() { 
 
    $("#modelWindow_2").modal("toggle"); 
 
}); 
 

 
$("#label3").click(function() { 
 
    $("#modelWindow_3").modal("toggle"); 
 
}); 
 

 
$("#label4").click(function() { 
 
    $("#modelWindow_4").modal("toggle"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<button class="btn btn-primary pull-right" id="label4">View Details 4</button> 
 
<button class="btn btn-primary pull-right" id="label3">View Details 3</button> 
 
<button class="btn btn-primary pull-right" id="label2">View Details 2</button> 
 
<button class="btn btn-primary pull-right" id="label1">View Details 1</button> 
 

 
<div class="modal fade" id="modelWindow_1" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Title 1</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px"> 
 
     <p class="well">Some description 1 
 
      <p> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="modelWindow_2" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Title 2</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px"> 
 
     <p class="well">Some description 2 
 
      <p> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="modelWindow_3" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Title 3</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px"> 
 
     <p class="well">Some description 3 
 
      <p> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="modelWindow_4" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Title 4</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px"> 
 
     <p class="well">Some description 4 
 
      <p> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>