how detect modal bootsrap will open or close by clicking href

Hello guys, now i will give short tutorial about detect modal open or not, cause sometime programmers need this way to thorw variable inside modal or anything else based on your need it,

Here is my demo Chech This out

Here js detect modal open

  $('#myModal').on('shown.bs.modal', function(event) {  
  alert('modal open baby');  
 });  

Here href to open modal

 <button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Open Modal</button>  

Here cancel button in the top

 
 <button aria-hidden="true" class="close" data-dismiss="modal" id="cancel" type="button">×</button>  
 Here cancel button in the bottom  
  <div class="modal-footer">  
 <button class="btn btn-primary" id="btnsubmit" type="button">Save</button>  
         <button class="btn btn-danger" data-dismiss="modal" id="btncancel" type="button">Cancel</button>  
       </div>  

Here js detect when users close or cancel modal

 //detect user close or cancel modal  
  $('#cancel,#btncancel').on("click", function(e) {  
     console.log('modal cancel or close');  
   });