Bootstrap: Выберите изображение из модального

Question

Я создал модальный в моей форме, который содержит кучу изображений для выбора. Однако я понятия не имею, как выбрать изображение, как после того, как я нажму на него, модальный закроется, и имя изображения будет показано рядом с кнопкой модального запуска. Это код, который я сейчас:

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Click to launch Image Gallery... 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     {% for image in images %} 
      <input type="image" src="{{ image.url }}" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;"> 
     {% endfor %} 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Добавить класс для изображения (только для идентификации и делать некоторые трюк)

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Click to launch Image Gallery... 
</button> 

<div id='div_img_name'> </div> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 

      <!-- images added for example purpose--> 

      <input type="image" src="https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img"> 

      <input type="image" src="https://pennyandjohninoz.files.wordpress.com/2011/10/icons-of-australia-3-sydney-opera-house.jpg" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img">        

     </div> 
    </div> 
    </div> 
</div> 

JavaScript добавить

$(".img").click(function(){ 
    $("#div_img_name").text($(this).attr('src')); 
    $('#myModal').modal('hide') ; 
})