Redimensionner automatiquement la largeur et la hauteur avec la boîte de dialogue jQuery

Question

J'utilise la boîte de dialogue jQuery UI pour charger le contenu ajax. Il positionne correctement le dialogue verticalement, cependant avec l'option width: "auto" il ne le centre pas horizontalement. Il est décentré, comme 100px à droite du centre.

Voici mon 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'] 
    }); 
}); 

Toutes les idées s'il y a un moyen de l'avoir redimensionnement automatique et rester centré?

EDIT: Cela fonctionne:

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

Essayez ce code. Cela fonctionne pour moi et est le navigateur croisé.

$(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 création d'un dialogue à partir de ceci devrait être assez simple.

Answer 2

Pour éviter les problèmes de positionnement, attendez que le contenu soit chargé avant de créer ou d'ouvrir la boîte de dialogue. Dans le cas contraire:

1. dialogue jQuery UI calcule la largeur et le centre du vide div
2. Lorsque les charges de contenu, le côté droit de la boîte de dialogue s'étend pour accueillir le contenu tandis que le côté gauche reste fixe, ce qui la boîte de dialogue à apparaître décalé vers la droite

Votre exemple de code doit être modifié à ceci:

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