加载ajax调用的jQuery UI对话框不会水平居中

Question

我有一个对话框，一旦ajax调用加载了一个未知大小的图像，就会调用该对话框。 我有最大高度和最大宽度。 我发现了类似的问题，但是答案并没有解决我的问题。 到目前为止，我将屏幕宽度除以4以设置X坐标。 但是，这不能使窗口精确居中。

var windowWidth = $(window).width()
var modalCenter = windowWidth/4;
$("#userImage").dialog({
    autoOpen: false,
    modal: true,
    width: 'auto',
    create: function (event, ui) {
           $(this).css("maxWidth", "700px");
    },
    height: 'auto',
    maxHeight: 600,
    show: { effect: 'fold', duration: 250 },
    position: [modalCenter, 100],
    buttons: {
        Cancel: function () {
        $(this).dialog("close");
    },
    Crop: function () {
     var x = $('#x').val();
     var y = $('#y').val();
     var w = $('#w').val();
     var h = $('#h').val();
     if (!checkCoords())
        return false;
     $.ajax({
         url: "CropImage.aspx?x=" + x + "&y=" + y + "&w=" + w + "&h=" + h,
         cache: false
     }).done(function (html) {
         //another ajax call will get all images as a list and display them where they can be set as primary images/subImages
       })
    }
  }
});

这是一张图片：

Answer 1

完成ajax后，可以重新放置对话框吗？

就像是：

Crop: function(){
    var self = $(this);
    $.ajax({...}).done(function(){
        self.position({
            my: "center",
            at: "center",
            of: window
        });
    });
}

Answer 2

我想回答我自己的问题。 完成ajax调用并打开模式后，我将使用一半的“窗口宽度”和一半的“对话框宽度”。 然后，我从窗口宽度中减去对话框的宽度，并将“左”位置设置为该新数字。 我使用间隔作为延迟来获取对话框的整个宽度。 打开它大约需要250毫秒。

$('#userImage1').dialog('open');
    var windowWidth = $(window).width();
    var i = setInterval(function () {  
        dialogWidth = $('.ui-dialog').width();
        dialogCenter = dialogWidth / 2;
        modalCenter = windowWidth / 2 - dialogCenter;
        $('.ui-dialog').css('left', modalCenter);
        clearInterval(i);
    }, 300);