Question

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

对话框最初位于页面的中心。这里的问题是，由于它是动态内容，因此数据的大小是未知的。因此，当我获得大数据时，对话框仅在底部增长，即对话框在底部展开，顶部仍处于相同位置。

我想要的是

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

Answer 1

在我查看解决方案时，我在互联网上找到的答案都没有让我满意。即便是这个也没有。在阅读了有关JQuery API文档的更多信息后，I found something really interesting。正如此网页所描述的那样，您可以绑定在ajax请求完成其工作后将在其中执行的事件。事情是，这并不简单;当我在进行自己的测试时，使用API文档中提供的示例，我无法使其工作。看起来我的JQuery对话框并不存在于“未来”的上下文中。

这导致我this page的描述是： 为现在和将来与当前选择器匹配的所有元素附加一个事件处理程序。找到这个导致我创建一个像这样的函数：

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

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

希望它能在未来帮助人们！

编辑：你可能想要使用函数“.on（）”而不是“.live（）”。从我写答案的时候开始，似乎函数“.live（）”已经在jQuery的1.9版本中删除，并被新的替换。对于jQuery＆gt; = 1.9的用户来说，更合适的解决方案是这样的：

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

Answer 2

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

对话框可能会在给出自动高度时展开，但是当滚动页面时，对话框会重新定位。

执行此操作的唯一方法是将这些样式应用于对话框

将对话框放在Window by
中
position : ['center',<distance from top>]
使用css样式
修复位置
.fixed-dialog { position:"fixed" }
将此类添加到对话框

dialogClass : 'fixed-dialog'

因此，对话框看起来像

$('#dialog-div').dialog({
        position : ['center',10],
        dialogClass: "fixed-dialog"
    });

Answer 3

 Use this
    modal: true,
    width: '80%',
    autoResize:true,
    resizable: true,
    position: {
        my: "center top", 
        at: "center top", 
        of: window
    }

订单必须相同

Answer 4

我使用该功能：

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

  });

}

Answer 5

在我将对话框内容移动到ajax源之前，定位很好，之后定位就成了问题。今天下面为我工作。

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

请注意，“ + 50”是“从顶部向下50像素”，无论是否添加到“我的”或“在”行，它都有效。不允许使用空格。例如：“中上方+ 50”将不起作用。

查看文档option-position

中的更多信息

Answer 6

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

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

您可以按时播放。我选择了1/2秒。

jQuery - Dialog自动调整动态内容的大小并保持中心位置

6 个答案: