Bootstrap Modal Point of Origin

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<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>

CSS

.target-area {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.modal {
    -webkit-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

JavaScript

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('hide', function () {    
    $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)', opacity:'0'});
    return false;    // uncomment this line to see zoom out
});
*/

$modal.on('hidden', function () {
    $modal.css({top: '', left: '', transform: '', opacity:''});
});