Ridimensionamento automatico altezza e larghezza con la finestra di dialogo jQuery

Question

Sto utilizzando la finestra di dialogo dell'interfaccia utente jQuery per caricare contenuto ajax. Posiziona correttamente la finestra di dialogo verticalmente, tuttavia con l'opzione width: "auto" non lo centra orizzontalmente. È decentrato, come 100 px a destra del centro.

Ecco il mio codice:

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

Tutte le idee, se c'è un modo per averlo ridimensionamento auto e rimanere centrato?

EDIT: Questo funziona:

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

provare questo codice. Funziona per me ed è 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(); 

La creazione di una finestra di dialogo da questa dovrebbe essere abbastanza semplice.

Answer 2

Per evitare problemi di posizionamento, è necessario attendere il caricamento del contenuto prima di creare o aprire la finestra di dialogo. In caso contrario:

dialogo

1. jQuery UI calcolerà la larghezza e centro del vuoto div
2. Quando i carichi di contenuti, il lato destro della finestra di dialogo si estende per accogliere il contenuto mentre il lato sinistro rimane fisso, causando la finestra di dialogo per apparire spostata verso destra

il codice di esempio deve essere modificato in questo modo:

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