加载有 ajax 调用的 Jquery ui 对话框不会水平居中答案

【问题标题】：Jquery ui Dialog loaded with ajax call won't center horizontally加载有 ajax 调用的 Jquery ui 对话框不会水平居中
【发布时间】：2013-12-23 01:15:03
【问题描述】：

我有一个对话框，一旦 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
       })
    }
  }
});

这是一张图片：

【问题讨论】：

您可以创建一个jsFiddle 来展示您的问题吗？
您是否尝试过不设置位置以查看它出现的位置？看看这个：stackoverflow.com/questions/1839702/…
@Poornima 是的，我已经尝试了几种解决方案。
@Scott 我无法在小提琴中重新创建问题，因为在通过 ajax 将未知大小的图像加载到其中后，对话框窗口会打开。如果没有该 ajax 调用，问题就不会发生。
什么是“作物”？您是否扩展了 jquery 对话框小部件？对不起，如果我的问题很愚蠢，但这里没有列出api.jqueryui.com/dialog。

标签： javascript jquery html css ajax

【解决方案1】：

我想回答我自己的问题。一旦完成 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);

【讨论】：

【解决方案2】：

当你的 ajax 完成后，你可以重新定位对话框吗？

类似：

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

【讨论】：