自动调整宽度和高度与jQuery对话框

I am using jQuery UI dialog to load ajax content. It is correctly positions the dialog vertically, however, with width: "auto" option it does not center it horizontally. It is off-centered, like 100px to the right of center.

我正在使用jQuery UI对话框加载ajax内容。它正确地将对话框垂直放置，但是宽度为:“auto”选项，它不会将对话框水平居中。它是偏离中心的，就像中心的右边的100px。

Here is my code:

这是我的代码:

$('.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']
    });
});

Any ideas if there's a way to have it auto resize and remain centered?

有什么办法让它自动调整大小并保持居中吗?

EDIT: This works:

编辑:这个工作原理:

$("#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) {}
    });
});

2 个解决方案

#1

To avoid positioning problems, you should wait for the content to load before creating or opening the dialog. Otherwise:

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

jQuery UI dialog will calculate the width and center of the empty div
jQuery UI对话框将计算空div的宽度和中心
When the content loads, the right side of the dialog stretches to accomodate the content while the left side remains fixed, causing the dialog to appear shifted towards right
当内容加载时，对话框的右侧扩展以容纳内容，而左侧保持不变，导致对话框出现向右移动

Your sample code should be changed to this:

您的示例代码应该更改为以下内容:

$("#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

Try this code. It works for me and is cross browser.

试试这个代码。它对我很有用，是跨浏览器。

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

Creating a dialog from this is should be fairly straight forward.

由此创建一个对话框应该是相当直接的。

#1