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" data-dismiss="modal" class="btn">Ok</button>
  </div>
</div>

CSS

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

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

JavaScript

var $modal= $('.modal');
$('.target-area').on('click', function (e) {
    $modal.css({top: e.clientY, left: e.clientX, transform: 'scale(0.2, 0.2)'});
    $modal.modal();
    $modal.css({{top: e.clientY, left: e.clientX, transform: 'scale(0.2, 0.2)'});
});