使用JavaScript和CSS从中心调整模式大小

我有以下小提琴的例子：

在这里，当我单击show链接时，我使用jQuery显示一个模式，并使用CSS动画将其淡入并放大。在模态内部，我有另一个调整模态大小的链接。其想法是，它应该从中间调整大小，使其看起来像是在放大（尽管我们没有使用缩放，因为我们实际上是在改变模态的尺寸）。想想这些弹出窗口在Xbox 360上是如何工作的

出现了两个问题。。首先，虽然调整大小确实尊重css转换，但它们不会触发事件转换，因此中心代码不会在调整大小后运行。第二个问题是，调整大小不是从中心开始的

有什么办法可以做到这一点吗

代码如下：

jQuery.fn.centerImage = function () {

    var win = window.parent;

    var element = $(this);

    var centerElement = function () {
        element.css("position", "absolute");
        element.css("top", ( (($(win).height()) - element.outerHeight()) / 2));
        element.css("left", ( (($(win).width()) - element.outerWidth()) / 2));
    }

    element.bind('centerElement', centerElement).trigger('centerElement');

    $($(win)).bind('resize', function () {
        element.trigger('centerElement');
    });

    return element;
}

$(document).ready(function(){

    $('.show').on('click', function(e){

        $('.modal').centerImage().addClass('show');

    });

    $('.resize').on('click', function(e){

        $('.modal').width(640).height(480);

        $('modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });

    });

});

.modal
{
    width: 480px;
    height: 320px;
    background: #ffffff;
    box-shadow: rgba(0,0,0,.6) 0 0 16px;

    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal.show
{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

---

你会踢自己的

$('modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });

应该是

$('.modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });

---

啊，谢谢你。它仍然会向右调整大小，然后重新居中。。。我怎么能从中心做到这一点？因此，它的效果几乎与音阶相同。再次感谢。