javascript - Make Bootstrap Modal zoom out from clicked object -

i'm writing custom transition bootstrap modal. how make zoom out(scale) center button clicked, , when dismiss it, zoom in button?

i found this example zoom(scale) transition, scales 1 place, rather custom reference point:

var $modal= $('.modal');  $('.target-area').on('click', function (e) {     $modal.css({top: e.clienty, left: e.clientx, transform: 'scale(0.1, 0.1)'});     $modal.modal();     $modal.css({top: '', left: '', transform: ''}); });   $('#dismissmodal').click(function(){     $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)', opacity:'0'}); settimeout(function(){         $('.modal').modal('hide')     },750); });  $modal.on('hidden', function () {     $modal.css({top: '', left: '', transform: '', opacity:''}); });  ....  <div class="target-area">     click anywhere launch modal </div>  <div class="modal hide">   <div class="modal-header">       <h3>header</h3>   </div>   <div class="modal-body">     body   </div>   <div class="modal-footer">     <button type="button" id="dismissmodal" class="btn">ok</button>   </div> </div>