使Bootstrap Modal从单击的对象缩小

Question

我正在为Bootstrap模式编写自定义过渡。如何从你点击的按钮缩小（缩放）到中心，然后当你关闭它时，放大回按钮？

我发现this example有缩放（缩放）过渡，但它从一个地方缩放，而不是自定义参考点：

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>