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

Posted 2023-03-29

【中文标题】jQuery - 对话框自动调整动态内容的大小并保持中心位置

【英文标题】：jQuery - Dialog auto-resize on dynamic content and maintain center position

【发布时间】：2012-06-28 12:34:06

【问题描述】：

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

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

我想要的是

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

【问题讨论】：

尝试调用 "$( "#dialog" ).dialog();"每次 ajax 更新后再次？

@madhairsilence ：如果您发现我的回答很好，请考虑将其设为“已接受”。这将使未来的访问者更容易看到它。谢谢！

该问题已标记答案

@madhairsilence 不能取消选中已接受的答案并选择一个新答案吗？至于我自己，我可以在大约两年前提出的问题中做到这一点。

【参考方案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 >= 1.9 的用户来说，更合适的解决方案是这样的：

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

【参考方案2】：

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

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

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

在窗口中定位对话框

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

使用 css 样式固定位置

.fixed-dialog position:"fixed"

将此类添加到对话框中

dialogClass : 'fixed-dialog'

所以，对话框看起来像

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

【参考方案3】：

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

顺序必须相同

【讨论】：

autoResize 是什么？可以参考一下文档吗？

autoresize 是一个内置属性，您可以将其用于您的模态窗口，它是布尔类型。

我在documentation 中看不到它。你能指导我吗？谢谢

【参考方案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

  );

【参考方案5】：

在我将对话框内容移动到 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”将不起作用。

在文档option-position中查看更多信息

【参考方案6】：

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

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

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