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('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>

var$modal=$（'.modal'）；
$（'target area'）。在（'click'，函数（e）上{
$modal.css（{top:e.clientY，left:e.clientX，transform:'scale（0.1,0.1）}）；
$modal.modal（）；
$modal.css（{top:''，left:''，transform:''}）；
});
$（“#dismissModal”）。单击（函数（）{
$modal.css（{top:0，left:0，transform:'scale（0.1,0.1）”，不透明度：'0'}）；
setTimeout（函数（）{
$（'.modal'）.modal（'hide'））
},750);
});
$modal.on（'hidden'，function（）{
$modal.css（{top:''，left:''，transform:''，opacity:''}）；
});
....
单击任意位置以启动modal
标题
身体
好啊

如果“全屏运行”，会发生什么？（即，使结果部分尽可能大。）我认为，只有从浏览器视口的左上角呈现结果html（JSFIDLE中没有），代码才能正常工作。@ArneHugo“fullscreen”无法修复它。需要更可靠的解决方案…我刚刚再试了一次，现在它似乎工作得很好（在Chrome和Firefox中）。这对你还是不起作用吗？（JSFIDLE现在在iframe中呈现结果，iframe在浏览器窗口中充当浏览器窗口，它有自己的

clientX

和

clientY

。不确定JSFIDLE之前是否使用过iframe，但如果它是一个新功能，那么这就是修复它的方法。）如果它仍然不工作，请告诉我，当模式被解除时，它将向

x:0，y:0

方向缩放。我做了一个小小的调整，使它在被解雇时出现。