Question

我加载到模态对话框中的文件高度可能不同。打开第一个链接时，对话框的顶部水平居中（意味着对话框的位置太低）。关闭它并重新打开后，使用相同的编辑按钮或不同的编辑按钮，定位更好。

似乎总是落后一步：第一次加载它无法分辨正在加载的文件的宽度/高度是什么，然后在同一文件的后续加载中，它完美定位。

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

$(".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中的文件不是实时的）。我也在JS Bin设置了这个。

<html>
  <head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  </head>
    <body>
      <button class="editMe" name="2810">edit</button>
      <button class="editMe" name="2811">edit</button>
      <button class="editMe" name="2812">edit</button>
      <button class="editMe" name="2813">edit</button>
      <div id="modify"></div>
  </body>
</html>

Answer 1

您可以在加载内容后触发重新定位（因此您知道大小），如下所示：

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

这只是使用.load()的回调并设置position option，它会在适当的时间触发重新中心...一旦你知道正确的大小是什么。< / p>

作为旁注，由于您正在创建然后打开对话框，因此您可以删除autoOpen: false,属性和.dialog("open")，默认行为是立即打开：）

Answer 2

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

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

NB 如果您在对话框调整大小时担心屏幕抖动，那么您可以将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;

});

Answer 3

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

jQuery UI模式对话框仅以SECOND加载为中心（来自外部文件的内容）？

3 个答案: