Как передать и использовать URL-адрес в функции jQuery и как разрешить проблему при закрытии мода Bootstrap после нажатия значка закрытия на модальном?

Question

Я использую Bootstrap рамки v3.3.0 на мой сайт:

Я имеющий следующий HTML:

<a href="#" align="center" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal" onclick="showreceipt('http://localhost/images/J12345_6946.jpg');">View Receipt</a> 


I want to show the following modal dialog box when user clicks on the above hyperlink. While doing so I want to pass the image URL to the modal dialog and show the image in modal dialog. Following is the modal dialog: 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4> 
       </div> 
       <div class="modal-body" style="max-height: 420px; overflow: auto;"> 
       <!-- Here I want to put image tag with image "src" from hidden field --> 
       </div> 
      </div> 
      </div> 
     </div> 

Ниже приводится функция, которую я написал для достижения этой цели, но я не мог сделать это:

<script> 
    function showreceipt(url) { 
     $('div #modal-body').html('<img class="img-responsive" src="url" style="text-align:center;">'); 
     $('#myModal').modal('show'); 
    } 
    </script> 

Пожалуйста, руководство меня передавая значение URL в приведенном выше функцию и использовать его в атрибуте IMG в модальный диалог.

Также модальный не приближается после нажатия на кнопку закрытия. Я не знаю, почему это происходит.

Также, когда пользователь закрывает модальный режим, поле img src должно быть сброшено на "".

Как достичь этого в моем коде?

Пожалуйста, помогите мне в моей попытке.

Answer 1

Я пытаюсь ответить вам. Извините, если я вас не понял.

<a href="#" align="center" type="button" class="btn btn-danger" 
    data-toggle="modal" 
    data-target="#myModal" onclick="showreceipt('http://localhost/images/J12345_6946.jpg');">View Receipt</a> 
<script> 
    function showreceipt(imgUrl) { 
     $('#myModal').modal('show'); 
     $('#myModal #modal-body').html('<img class="img-responsive" />'); 
     $('#myModal #modal-body .img-responsive').prop('src', url); 
     $('#myModal #modal-body .img-responsive').css('text-align', 'center'); 

     return false; 
    } 
</script> 

Answer 2

Вы можете сделать что-то подобное. Я создал пример, чтобы показать: http://www.bootply.com/rbIcW7Mao8

<a href="#" align="center" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">View Receipt</a> 
<input type="hidden" id="student_url" name="student_url" value="https://www.google.co.uk/logos/doodles/2014/wassily-kandinskys-148th-birthday-5655681428357120-hp.jpg"> 

Создать свой модальный с в теле пустой <img>:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4> 
     </div> 
     <div class="modal-body" style="max-height: 420px; overflow: auto;"> 
     <img class="myImg img-responsive" src="" style="text-align:center;"> 
     </div> 
    </div> 
    </div> 
</div> 

Затем установить изображение, когда модальные выдвинется через JQuery:

$(function(){ 
    $('#myModal').on('hidden.bs.modal', function (e) { 
     $(".myImg").attr('src', ""); 
    }); 
    $('#myModal').on('show.bs.modal', function (e) { 
     $(".myImg").attr('src', $("#student_url").val()); 
    }); 
}); 

Эти функции стреляют по show и hidden событиям modal. Один установит изображение на основе того, что находится в скрытом <input>, и один очистит изображение.

В примере, который я создал, modal, похоже, отлично подходит. Поэтому не уверен, в чем проблема, с которой вы сталкиваетесь.