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

我正在使用jQuery UI对话框来加载ajax内容.它正确地垂直定位对话框,然而,宽度：“自动”选项它不会水平居中.它偏离中心,就像中心右侧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'),150],create: function(event,ui) {}
    });
});

解决方法

要避免定位问题,您应该在创建或打开对话框之前等待内容加载.除此以外：

> 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,width: "auto",position: { my: "top",at: "top",of: window }
  });
});

原文地址：https://www.jb51.cc/jquery/177170.html