模態顯示只有一次後php回聲

Question

我想創建一個模式彈出當用戶點擊一個特定的按鈕，但模態只顯示一次。我有兩個不同的PHP files.The第二次發送回聲HTML內容到另一個在具體div。下面是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>'; 

因此，有3 echo「s.The第一爲內容，第二是模態和所述第三觸發我說的模態的modal.As顯示只有一次，我不明白原因。我需要包括一些js或css在這個文件中的文件？任何想法將有所幫助..

Answer 1

你的代碼實際上工作得很好。我嘗試把假內容放在一起，如下所示。注意我添加到HTML代碼中的js和css文件。

更新：我試圖把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>