Tamaño y ancho automáticos del tamaño con el cuadro de diálogo jQuery

Question

Estoy utilizando el diálogo de la interfaz de usuario de jQuery para cargar contenido ajax. Posiciona correctamente el diálogo verticalmente, sin embargo, con la opción width: "auto", no lo centra horizontalmente. Está descentrado, como 100px a la derecha del centro.

Aquí está mi código:

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

Cualquier idea si hay una manera de tenerlo cambio de tamaño automático y permanecer centrados?

EDIT: Esto funciona:

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

probar este código. Funciona para mí y es un navegador cruzado.

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

Crear un diálogo a partir de esto es bastante sencillo.

Answer 2

Para evitar problemas de posicionamiento, debe esperar a que se cargue el contenido antes de crear o abrir el cuadro de diálogo. De lo contrario:

de diálogo

1. jQuery UI calculará la anchura y el centro del vacío div
2. Cuando se carga el contenido, el lado derecho del cuadro de diálogo se estira para acomodar el contenido, mientras que el lado izquierdo permanece fijo, causando el cuadro de diálogo para aparecer desplazado hacia la derecha

Su código de muestra debe ser cambiado a esto:

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