이미지를 부트 스트랩 모달로 전달

Question

안녕하세요. 이미지 목록이 있습니다. 사용자가 이미지를 클릭하면 부트 스트랩 모달이 열립니다. 이 부 풀랩 모달에서는 사용자가 클릭 한 이미지가 나타나야합니다.

제발, 더 명확하게하기 위해 아래의 코드에서 내 의견을보십시오.

도움이된다면 크게 도움이 될 것입니다. 고맙습니다.

<center> 
    <div id="items" class="transitions-enabled"> 
    <% @images.each do |image| %> 
     <div class="box panel panel-default"> 
     <div class="square_item_image"> 
      #HERE IS THE IMAGE I WANT TO APPEAR IN THE BOOSTRAP MODAL 
      <%= image_tag(image["images"]["low_resolution"]["url"]) %> 
     </div> 
     <div class="item_info"> 
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Create Outfit</button> 
     </div> 
     </div> 
    <% end %> 
    </div> 
</center> 

<!-- Modal --> 
<div class="modal fade" id="myModal" 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">Create</h4> 
     </div> 
     <div class="modal-body"> 
     #I WOULD LIKE THE IMAGE TO APPEAR HERE 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

자바 스크립트를 사용하여 수행 할 수 있습니다 그것은

JAVASCRIPT

$(document).on("click", ".open-AddImgDialog", function() { 
var imgsrc = $(this).data('id'); 
$('#my_image').attr('src',imgsrc);); 
}); 

HTML 코드

<div class="item_info"> 
<button type="button" class="btn btn-info btn-lg open-AddImgDialog" data-id="img/img.jpg" data-toggle="modal" data-target="#myModal">Create Outfit</button> 
</div> 

모달 팝

<div class="modal-body"> 
    <img id="my_image" /> 
</div> 

여기서 data-id = "img/img.jpg"는 이미지 경로이며 버튼에 클래스 이름 open-AddImgDialog를 추가합니다.