Modal displayed ONLY once after php echo

Question

I am trying to create a modal popup when user hits on a specific button but modal is displayed only once.I have two different PHP files.The second sends echoes HTML content to the other in a specific div .Below is the code of PHP second file:

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

So there are 3 echo 's.The first for the content, the second is the modal and the third triggers the modal.As I said the modal is displayed and I cannot understand the reason.Do I need to include some js or css files in this file?Any idea will be helpful.. 显示模式，我不明白原因，我需要包括一些js还是此文件中的css文件？有什么想法会有所帮助..

Answer 1

Your code actually works just fine. I try to put together with fake content as below. Notice the js and css files I added to the HTML code.

UPDATED: I tried to put 4 buttons and 4 modals as that of your code. Not sure if you find this helpful.

 $("#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>