2016-07-31 3 views
0

1 개의 게시물에 2-5 개의 이미지가 있고 부트 스트랩 모달을 클릭하면 모든 게시물의 모든 이미지를 표시하고 싶습니다.MySQL에서 부트 스트랩 모달로 이미지 가져 오기

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     ALL IMAGES WILL SHOW HERE 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 
+0

하나의 해결책은 이미지 위치의 배열을 가져온 다음이 배열을 템플릿에 전달하는 것일 수 있습니다. 이제 다이얼로그가 트리거 될 때'.html()'을 사용하여 jquery를 사용하여 배열에서 이미지를로드하면됩니다. –

답변

0
Using jquery 

=============

  1. 하는 것은 ID, 예를 들면 ID를 = "쇼"
  2. 다음 jQuery를 추가하기 모달 발사 버튼을 부여 코드는 모달에 이미지를 추가하는

    $("#show").on("click", function() {$(".modal-body").html("<img src='https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg' width='80px'><img src='https://static.pexels.com/photos/51397/legs-window-car-dirt-road-51397.jpeg' width='80px'><img src='https://static.pexels.com/photos/21014/pexels-photo.jpg' width='80px'>" ); }) 
    

View Demo

관련 문제