將圖像傳遞到引導模態

Question

您好，我有一張圖片列表。 用戶可以單擊任何圖像，它將打開一個引導模態。 在這個boostrap模式中，我需要用戶單擊的圖像出現。

請在下面的代碼中查看我的評論，以更加清楚。

任何幫助將不勝感激。 謝謝。

<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，你可以做到這一點

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。