Redimensionnement automatique de la largeur et de la hauteur avec jQuery dialogue

Je suis à l'aide de jQuery UI boîte de dialogue charger le contenu ajax. Il est correctement positions de la boîte de dialogue verticalement, cependant, avec width: "auto" option de ne pas le centrer horizontalement. Il est excentré, 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']
    });
});

Des idées si il y a une méthode pour redimensionner automatiquement et de 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) {}
    });
});
  • ajouter css margin-left:auto;margin-right:auto; à votre objet de définir centre, le faire.
  • jquery redimensionne, il va remplacer tout les styles par défaut
  • après le créer, je me suis endormi et je ne peux pas le trouver, désolé :D, mais quand votre objet à insérer dans votre page, vous pouvez changer sa position.
  • double possible de Centrage de jQuery UI boîte de dialogue de l'inconnu en hauteur est-il possible?
  • Vous devriez peut-être répondre à votre propre question + accepter que...
InformationsquelleAutor David | 2012-01-14
  1. 3

    Pour éviter les problèmes de positionnement, vous devez attendre que le téléchargement de contenu avant de créer ou d'ouvrir la boîte de dialogue. Sinon:

    1. jQuery UI boîte de dialogue de calculer la largeur et le centre de la vide div
    2. Lorsque le chargement du contenu, le côté droit de la boîte de dialogue s'étire pour accueillir le contenu tandis que le côté gauche reste fixe, provoquant la boîte de dialogue pour apparaître décalé vers la droite

    Votre exemple de code doit être changé à cela:

    $("#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 }
  });
});
    InformationsquelleAutor Salman A
  2. 0

    Essayer ce code. Il fonctionne pour moi et c'est la croix-navigateur.

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

    De créer un dialogue à partir de ce qui doit être assez simple.

    InformationsquelleAutor niven300