加载ajax调用的Jquery ui Dialog不会水平居中

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);