javascript - Bootstrap modal close event -

i have bootstrap modal looks ;

following code it

<!-- buy send offer success --> <div class="modal fade custom-modal" id="make-offer-success" 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" onclick="javascript:add_request()"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>             <h4 class="modal-title" id="mymodallabel"><?php echo $data['item']['brand'].' '.$data['item']['model'];?></h4>         </div>         <div class="modal-body">             <div class="send-success"><i class="fa fa-check"></i> offer has been sent</div>         </div>         <div class="modal-footer">             <div class="col-md-6 btn-mrgn">                 <input type="hidden" id="item_unique_id" value="<?php echo $data['item']['item_unique_id']; ?>">                 <input type="hidden" id="buyer_id" value="<?php echo $this->session->userdata['id'] ?>">                 <button type="submit" class="btn gray-btn btn-common upercase" onclick="javascript:add_request()">close</button>             </div>         </div>     </div> </div> 

i calling java script function on close button , on "x" button on modal. problem when user clicks anywhere on screen modal disappears, function not called , screen stays faded.

can fix problem?. how can call javascript function when user clicks anywhere on screen other modal close buttons.

instead using hide event handler, called modal closed(assuming using modal method hide modal)

$('#make-offer-success').on('hide.bs.modal', function(){     //do stuff }) 

demo: fiddle