jQuery UI模态对话框是否仅以第二次加载（外部文件的内容）为中心？

我正在加载到模态对话框中的文件的高度可能会有所不同。打开第一个链接时，对话框顶部水平居中（表示对话框位置过低）。在我关闭并再次打开后，使用相同的编辑按钮或不同的按钮，定位会更好

它似乎总是落后一步：第一次加载时，它无法分辨正在加载的文件的宽度/高度，然后在随后加载同一个文件时，它的位置非常完美

我使用以下代码作为数据表的模式编辑：

$(".editMe").button({
    icons: {
        primary: 'ui-icon-document'
    },
    text: false
}).click(function () {
    var eventLink = $(this).attr("name");
    var dialogOpts = {
        title: "Make Modifications or Delete This Event",
        modal: true,
        autoOpen: false,
        height: "auto",
        width: "auto",
        open: function () {
            //The height of the file below can vary, and in the
            //JS Bin environment the dialog loads just fine blank
            $("#modify").load("themes_edit.asp?id=" + eventLink);
        },
        close: function () {
            oTable.fnDraw();
        }
    };
    $("#modify").dialog(dialogOpts).dialog("open");
    return false;
});

下面是一些示例HTML（尽管加载到#modify中的文件不是活动的）。我也在这里设置了这个

编辑
编辑
编辑
编辑
​

---

​

加载内容后，您可以触发重新居中（以便知道大小），如下所示：

var dialogOpts = {
    title: "Make Modifications or Delete This Event",
    modal: true,
    autoOpen: false,
    height: "auto",
    width: "auto",
    open: function () {
        $("#modify").load("themes_edit.asp?id=" + eventLink, function() {
          $(this).dialog('option', 'position', 'center');
        });
    },
    close: function () {
        oTable.fnDraw();
    }
};

这只是使用回调并设置，这将在适当的时间触发重新居中…这将在您知道正确的大小后立即进行

---

---

作为旁注，由于您正在创建并打开对话框，因此可以同时删除

autoOpen:false、

属性和

.dialog（“open”）

，默认行为是立即打开：）

因为在对话框打开事件中，您试图加载数据，所以“落后一步”。因此，当对话框显示时，它将显示旧内容，然后突然出现新内容

一种方法是打开对话框，但首先清除现有内容并显示加载gif，同时等待ajax调用响应数据，然后将数据加载到对话框中

N.B如果您担心对话框调整大小时会出现屏幕抖动，那么您可以将ajax响应放在一个位于屏幕外的div中，然后获取尺寸，然后在新内容中淡入时很好地设置对话框调整大小的动画

var dialogOpts = {
        title: "Make Modifications or Delete This Event",
        modal: true,
        autoOpen: false,
        height: "auto",
        width: "auto",
        close: function () {
            oTable.fnDraw();
        }
};

var $editDialog = $('#modify').dialog(dialogOpts);

$(".editMe").button({
    icons: {
        primary: 'ui-icon-document'
    },
    text: false
}).click(function () {

    var eventLink = $(this).attr("name");

    //clear existing dialog content and show an ajax loader
    $editDialog.html('<div class="loading" />');

    //show the dialog
    $editDialog.dialog("open");

    //get dynamic content and load it into the dialog and resize
    $.get("themes_edit.asp?id=" + eventLink, function(response){

        //fade out ajax loader
        $editDialog.find('div.loading').fadeOut(500, function(){

              $editDialog.html( response )
                         .dialog('option', 'position', 'center');

        });

    });

    return false;

});

var dialogOpts={
标题：“修改或删除此事件”，
莫代尔：是的，
自动打开：错误，
高度：“自动”，
宽度：“自动”，
关闭：函数（）{
oTable.fnDraw（）；
}
};
var$editDialog=$（“#修改”）.dialog（dialogOpts）；
$（“.editMe”）。按钮({
图标：{
主：“ui图标文档”
},
文本：false
})。单击（函数（）{
var eventLink=$（this.attr（“name”）；
//清除现有对话框内容并显示ajax加载程序
$editDialog.html（“”）；
//显示对话框
$editDialog.dialog（“打开”）；
//获取动态内容并将其加载到对话框中并调整大小
$.get（“themes_edit.asp？id=“+eventLink，函数（响应））{
//淡出ajax加载程序
$editDialog.find（'div.loading'）.fadeOut（500，function（）{
$editDialog.html（响应）
.对话框（“选项”、“位置”、“中心”）；
});
});
返回false；
});

我不确定我是否遗漏了什么，但下面是我是如何做到的。我在对话框中有一个ID为的div，当我想打开对话框时，我运行一个函数，首先将内容加载到对话框中的div中，然后在加载完成时打开对话框。（例如：$（“#foo”）.load（“/filepath.html”，function（）{$（“#dialog”）.dialog（“open”）}）

谢谢！我之前确实尝试过这种方法，但不喜欢调整大小的闪烁。在打开调整大小函数之前，对话框可以隐藏吗？@Paul-您可以将整个

.dialog（）

调用包装在

.load（）中）

回调，而不是

.load（）

处于打开功能中…但是对话框对用户来说似乎是滞后的，我认为在对话框中加载图像将是一种更好/更具信息性的方法。虽然这会给每个对话框增加不必要的半秒延迟，但我不建议大多数应用程序都这样做，总是尽快显示数据，让体验尽可能快e、 @NickCraver用户不会注意到，因为它的行为比“快速拍脸”内容外观更流畅，特别是因为ui对话框的打开并不很好地支持打开/关闭动画x-browser+op提到了他对闪烁事物的厌恶；）对话框本身就是这样，请记住，您的解决方案仍然会快速切换到一个新的大小，然后淡入（加载后的延迟，这是不必要的部分，如果使用的话，这应该是一个更短的持续时间），对我来说，这种组合比最初仅以正确的大小/位置显示内容更刺耳。-对于您的编辑：我发现效果在跨浏览器时非常有效，例如，我更喜欢drop来隐藏对话框。你还有其他问题吗？请看我的N.B-为了顺利地将对话框动画设置为新的所需尺寸尼克-更多的是打开对话框，没有好的动画可以在x-browser（特别是淡入淡出）下工作-不破坏插件的生命。

var dialogOpts = {
        title: "Make Modifications or Delete This Event",
        modal: true,
        autoOpen: false,
        height: "auto",
        width: "auto",
        close: function () {
            oTable.fnDraw();
        }
};

var $editDialog = $('#modify').dialog(dialogOpts);

$(".editMe").button({
    icons: {
        primary: 'ui-icon-document'
    },
    text: false
}).click(function () {

    var eventLink = $(this).attr("name");

    //clear existing dialog content and show an ajax loader
    $editDialog.html('<div class="loading" />');

    //show the dialog
    $editDialog.dialog("open");

    //get dynamic content and load it into the dialog and resize
    $.get("themes_edit.asp?id=" + eventLink, function(response){

        //fade out ajax loader
        $editDialog.find('div.loading').fadeOut(500, function(){

              $editDialog.html( response )
                         .dialog('option', 'position', 'center');

        });

    });

    return false;

});