Centrer la boîte de dialog de l’interface utilisateur jQuery de hauteur inconnue – est-ce possible?

Existe-t-il un moyen de faire en sorte qu’une boîte de dialog jQuery s’ouvre au centre de la fenêtre visible si sa hauteur est inconnue?

J’ai une boîte de dialog qui ouvre une forme chargée dynamicment de hauteur inconnue. Lorsque vous l’ouvrez pour la première fois, il est légèrement décalé vers le bas de l’écran. Lorsque je le ferme et que je l’ouvre à nouveau, il semble que le décalage supérieur soit calculé correctement.

Je ne peux pas connaître la hauteur du contenu à l’avance, c’est donc un problème pour moi.

edit: voici un exemple de code

J’ai deux pages – l’une est le conteneur de dialog qui instancie le dialog, et l’autre est le contenu du dialog. Lorsqu’un lien est cliqué, href est utilisé comme page cible pour la boîte de dialog.

$(document).ready(function(){ $(a).click(function(){ $("#dialog").load($(this).attr('href')) .dialog({ modal: true, width: 400 }); $("#dialog").dialog('open'); }); });

Vous devez spécifier height: ‘auto’ pour que la boîte de dialog soit ajustée en fonction de son contenu.

 .dialog({ height: 'auto', });

@ jon3laze La valeur par défaut de “position” est “center”, il n’est donc pas nécessaire de la définir dans la fonction de rappel ouvert.

@eagerMoose Il n’est pas nécessaire d’appeler le

 $("#dialog").dialog('open');

parce que les boîtes de dialog ont une option autoOpen, qui a par défaut la valeur true et que la boîte de dialog est ouverte immédiatement après l’instanciation. Le deuxième appel à .dialog (‘open’) est ignoré.

EDIT: comme la charge est asynchrone, le dialog est probablement initialisé avant que le contenu ne soit chargé. Essayez d’initialiser la boîte de dialog dans le chargement terminé.

 $(document).ready(function(){ $(a).click(function(){ $("#dialog").load($(this).attr('href'), function(){ $(this).dialog({ modal: true, width: 400 }); }); }); });

Vous pouvez saisir la hauteur avant de définir la boîte de dialog à l’aide de la propriété height

$ (window) .height (); // retourne la hauteur de la fenêtre du navigateur

$ (document) .height (); // retourne la hauteur d’un document HTML

 $(document).ready(function(){ var h = $(document).height(); $(a).click(function(){ $("#dialog").load($(this).attr('href')) .dialog({ modal: true, width: 400, height: h }).dialog('open'); }); });

En outre, vous pouvez chaîner le .dialog('open') à la fin de l’appel.

Exemple ici http://jsfiddle.net/BZpPH/1/

METTRE À JOUR

Le problème ressemble à la position du contenu. Vous pouvez utiliser l’option d’événement open pour le réinitialiser à l’ouverture. Je ne peux pas obtenir que cela fonctionne sur jsfiddle, car je ne vois pas comment faire fonctionner la méthode .load() . Cependant, j’ai essayé ceci sur mon propre serveur, la position par défaut en haut et le centre ouvert.

 $(a).click(function() { $('#dialog').load($(this).attr('href')) .dialog({ modal: true, width: 400, height: 'auto', open: function() { $(this).dialog('option', 'position', 'center'); } }); }); });

Le coupable était la fonction .load (). Ceci est un appel ajax, ce qui signifie que la fonction .dialog () est appelée avant que le contenu ne soit réellement chargé. La hauteur du contenu était donc pratiquement aléatoire.

J’ai réussi à résoudre le problème en définissant le dialog et ses actions dans la fonction .load (), comme ceci

 $(document).ready(function(){ $(a).click(function(){ $("#dialog").load($(this).attr('href'), function(){ $(this).dialog({ modal: true, width: 400 }); }); }); });