jquery - Bootstrap modal disappears the moment it shows up -

i trying adapt answer thumbnail, works partially.

my problem disappears moment shows up.

what might solution?

<div class="thumbnail">     <img src="http://cdn.shopify.com/s/files/1/0346/9741/products/spaniel_png_1024x1024.png?v=1436758378" data-toggle="modal" data-target="#mymodal">     <div class="caption" >         <h4>project one</h4>         <p>in project used html, css , javascript.</p>     </div> </div>  <!-- modal --> <div id="mymodal" class="modal fade" tabindex="-1" role="dialog">     <div class="modal-dialog modal-lg">          <!-- modal content-->         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">&times;</button>                 <h4 class="modal-title">modal header</h4>             </div>             <div class="modal-body">                 <img id="mimg" src="">             </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">close</button>             </div>         </div>     </div> </div> 

javascript:

$(window).load(function(){     $('img').on('click',function(){         var sr=$(this).attr('src');                              $('#mimg').attr('src',sr);         $('#mymodal').modal('show');     }); }); 

the problem have conflict auto initalizing attributes on image conflicting manual modal.show()

<img data-target="#mymodal" data-toggle="modal" src="..."> 

these attributes toggle same modal.

either remove attributes or don't manually call $('#mymodal').modal('show');

it works fine if comment out script