使用 jQuery 对话框自动调整宽度和高度答案

【问题标题】：Auto resize width and height with jQuery dialog使用 jQuery 对话框自动调整宽度和高度
【发布时间】：2012-01-14 21:56:36
【问题描述】：

我正在使用 jQuery UI 对话框来加载 ajax 内容。它可以正确地垂直定位对话框，但是，使用width: "auto" 选项它不会水平居中。它是偏离中心的，比如在中心右侧 100px。

这是我的代码：

$('.open').live('click', function(e) {
    e.preventDefault();
    $("#modal").load($(this).attr('href')).dialog({
        title: $(this).attr('title'),
        modal: true,
        autoOpen: true,
        draggable: false,
        resizable: false,
        width: 'auto',
        position: ['center', 'top']
    });
});

如果有办法让它自动调整大小并保持居中，有什么想法吗？

编辑：这可行：

$("#modal").load($(this).attr('href'), function() {
    $("#modal").dialog({
        title: $(this).attr('title'),
        width: 'auto',
        modal: true,
        autoOpen: true,
        draggable: false,
        resizable: false,
        position: ['center', 150],
        create: function(event, ui) {}
    });
});

【问题讨论】：

将 css margin-left:auto;margin-right:auto; 添加到您的对象以将其设置为中心，执行此操作。
jquery 调整它的大小，它将覆盖任何默认样式
创建后，我困了，找不到了，抱歉 :D，但是当你的对象插入你的页面时，你可以改变它的位置。
Centering jQuery UI dialog of unknown height - is it possible? 的可能重复项
也许你应该回答你自己的问题 + 接受......

标签： jquery ajax jquery-ui position jquery-ui-dialog

【解决方案1】：

为避免定位问题，您应该在创建或打开对话框之前等待内容加载。否则：

jQuery UI 对话框将计算 empty div
加载内容时，对话框的右侧会拉伸以容纳内容，而左侧保持固定，导致对话框看起来向右移动

您的示例代码应改为：

$("#modal").load("/ajax/content.html", function() {
  // callback is executed after post-processing and HTML insertion has been performed
  // this refers to the element on which load method was called
  $(this).dialog({
    modal: true,
    autoOpen: true,
    draggable: false,
    resizable: false,
    width: "auto",
    position: { my: "top", at: "top", of: window }
  });
});

【讨论】：

【解决方案2】：

试试这个代码。它适用于我并且是跨浏览器。

$(window).resize(function(){
        $('.className').css({position:'absolute', left:($(window).width() 
        - $('.className').outerWidth())/2,
        top: ($(window).height() 
        - $('.className').outerHeight())/2
        });
});

// To initially run the function:
$(window).resize();

从这里创建一个对话框应该是相当简单的。

【讨论】：