javascript - Popup doesn't go away after showing -

i have image gallery bootstrap, after bigger image shows up, doesn't go away after cliking outside image. using asp.net mvc 5

i have this:

css/html:

<div id="tabs-2">     <div class="row">         <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">             <img class="img-responsive" src="http://lorempixel.com/800/600/food/1" alt="" />         </div>         <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">             <img class="img-responsive" src="http://lorempixel.com/800/600/food/2" alt="" />         </div>         <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">             <img class="img-responsive" src="http://lorempixel.com/800/600/food/3" alt="" />         </div>     </div>      <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-body"></div>             </div>             <!-- /.modal-content -->         </div>         <!-- /.modal-dialog -->     </div>     <!-- /.modal --> </div> 

and jquery:

$(document).ready(function () {             $mymodal = $('#mymodal');              $('.row img.img-responsive').on('click', function () { // <-- notice selector change                 var $this = $(this),                     src = $this.attr('src'),                     html = '<img src="' + src + '" class="img-responsive" />';                  updatemodalbody($mymodal, html);                  $mymodal.modal();             });              $mymodal.on('hidden.bs.modal', function () {                 updatemodalbody($mymodal, '');             });              function updatemodalbody($modal, html) {                 $modal.find('.modal-body').html(html);             }         }) 

and dont errors in browser.

thank you

if using this:

function updatemodalbody($modal, html) {                 $modal.find('.modal-body').html(html);                 $modal.modal('hide');             } 

the image dissapear if click on other image, not outside images.

ok,

this javascript:

 $(document).ready(function () {             $mymodal = $('#mymodal');              $('.row img.img-responsive').on('click', function () { // <-- notice selector change                 var $this = $(this),                     src = $this.attr('src'),                     html = '<img src="' + src + '" class="img-responsive" />';                   updatemodalbody($mymodal, html);                  $mymodal.modal();             });              $mymodal.on('hidden.bs.modal', function () {                    updatemodalbody($mymodal, '');             });              function updatemodalbody($modal, html) {                 $modal.find('.modal-body').html(html);                 $modal.modal('hide');             }          })           $(document).ready(function()  {             $('#mymodal').on('shown', function () {                 $('#mymodal').modal('hide');             })         }); 

and css/html:

<div class="modal hide fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">                      <div class="modal-dialog">                         <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>                         <div class="modal-content">                             <div class="modal-body"></div>                         </div>                         <!-- /.modal-content -->                     </div>                     <!-- /.modal-dialog -->              </div> 

but close(x) button doesnt work.