7

我有一个 jQuery 对话框并正在使用 Ajax 加载内容。

对话框最初位于页面的中心。这里的问题是，由于它是动态内容，数据的大小是未知的。所以，当我得到大数据时，对话框只在底部增长，即对话框在底部展开，顶部仍然在同一位置。

我想要的是

加载数据时，对话框应在两个方向（顶部和底部）展开，以便内容可见而无需滚动。

4

6 回答 6

14

当我在寻找解决方案时，我在互联网上找到的答案都没有让我满意。连这个都没有。在阅读了更多关于 JQuery API 文档的内容后，我发现了一些非常有趣的东西。正如这个网页所描述的，您可以绑定一个事件，在 ajax 请求完成其工作后将在该事件中执行该事件。问题是，事情不是这样简单的；当我使用 API 文档中提供的示例进行自己的测试时，我无法使其工作。似乎我的 JQuery 对话框不以“未来”的上下文方式存在。

这将我带到了这个页面，该页面的描述是： 为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。发现这一点导致我创建了一个像这样的函数：

$(document).live("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});

瞧！它就像一个魅力！ajax 请求完成后，position 属性被更改并适应 div 的内容及其尺寸！

希望它对未来的人们有所帮助！

编辑：您可能想要使用函数“.on()”而不是“.live()”。自从我写下我的答案以来，似乎函数“.live()”已在 jQuery 1.9 版中被删除并被新的取代。对于 jQuery >= 1.9 的用户来说，更合适的解决方案是这样的：

$(document).on("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});
于 2013-07-24T21:38:22.330 回答
2

默认对话框是绝对相对定位的。

对话框可能会在提供auto height时展开，但是当页面滚动时，对话框会重新定位。

这样做的唯一方法是将这些样式应用于对话框

  1. 将对话框定位在窗口中

    position : ['center',<distance from top>]

  2. 使用 css 样式固定位置

    .fixed-dialog { position:"fixed" }

  3. 将此类添加到对话框

    dialogClass : 'fixed-dialog'

所以，对话框看起来像

$('#dialog-div').dialog({
        position : ['center',10],
        dialogClass: "fixed-dialog"
    });
于 2013-01-03T04:53:40.330 回答
1 
 Use this
    modal: true,
    width: '80%',
    autoResize:true,
    resizable: true,
    position: {
        my: "center top", 
        at: "center top", 
        of: window
    }

顺序必须相同

于 2015-07-27T11:44:55.493 回答
0

我正在寻找一个简单的解决方案，并意识到我的图表在打开对话框之前还没有完成“绘制”，所以我将 .dialog('open') 命令包含在 setTimeout 函数中。

setTimeout(function () {
    $('#pie-Admin-Summary-dialog').dialog('open');
}, 500);

你可以玩时间。我选择了 1/2 秒。

于 2020-11-30T05:42:36.973 回答
0

在我将对话框内容移动到 ajax 源之前定位很好，之后定位是一个问题。以下内容今天对我有用。

$('#formdialog').dialog({autoOpen: false, modal: true, title:'Dialog Title',  
    position: {
    my: "center top", 
    at: "center top+50", 
    of: window
}});

请注意，“+50”是“从顶部向下 50px”，无论添加到“my”还是“at”行都有效。不允许有空格。例如：“center top + 50”将不起作用。

在文档选项位置中查看更多信息

于 2018-07-27T22:16:15.870 回答
0

我使用该功能：

function centerDialog(id){

  var d = $('#'+id).closest('.ui-dialog'),
      w = $(window);

  d.css({

    'top':(w.height()-d.outerHeight())/2,
    'left':(w.width()-d.outerWidth())/2

  });

}
于 2016-01-07T11:37:24.180 回答