Question

我正在使用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) {}
    });
});

Answer 1

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

jQuery UI对话框将计算空 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 }
  });
});

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

从中创建一个对话应该是相当直接的。

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

2 个答案: