How to pass and use URL in jQuery function and how to resolve the issue in closing the Bootstrap modal upon clicking close icon on modal?

Question

I'm using Bootstrap v3.3.0 framework for my website:

I'm having following 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>

Following is the function I wrote to achieve this but I couldn't make it:

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

Please guide me in passing the URL value to the above function and use it in img attribute into a modal dialog.

Also the modal is not getting close after clicking on close button. I don't know why this is happening.

Also when user closes the modal the img src field should get reset to "".

How to achieve this in my code?

Please help me in my attempt.

Answer 1

You can do something like this. I have created an example to show: 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">

Create your modal with an empty <img> in the body:

<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>

Then set the image when the modal pops open via 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());
    });
});

These functions fire on the show and hidden events of the modal . One will set the image based on what is in the hidden <input> and one will clear the image.

In the example I created the modal seems to close fine. So not sure what the issue you are having there is.

Answer 2

I try to answer you. Excuse me if I did not understand you.

<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>