Make Bootstrap Modal Deletion from Object with a Click

Question

I am writing a custom transition for Bootstrap modal. How to take a picture (scale) in the center of the pressed button, and then when you release it, zoom in to the button?

I found this example with a change in scale (scale), but it scales from one place, not from a user control 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 to 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>