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


i'm using bootstrap v3.3.0 framework 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>   want show following modal dialog box when user clicks on above hyperlink. while doing want pass image url modal dialog , show image in modal dialog. following 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 want put image tag image "src" hidden field -->               </div>               </div>           </div>         </div> 

following function wrote achieve 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 url value above function , use in img attribute modal dialog.

also modal not getting close after clicking on close button. don't know why happening.

also when user closes modal img src field should reset "".

how achieve in code?

please me in attempt.

i try answer you. excuse me if 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> 

Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -