positionnement du dialogue jQuery UI

Question

Je suis en train d'utiliser le jQuery boîte de dialogue de l'INTERFACE utilisateur de la bibliothèque, afin de positionner une boîte de dialogue à côté du texte lorsqu'il est survolé. Le jQuery dialogue prend un paramètre de position, qui est mesurée à partir du coin supérieur gauche de la fenêtre actuelle (en d'autres termes, [0, 0] sera toujours le mettre dans le coin supérieur gauche de la fenêtre de votre navigateur, peu importe où vous êtes actuellement affichée). Cependant, le seul moyen que je connaisse pour récupérer l'emplacement de l'élément par rapport à l'ENSEMBLE de la page.

Ce qui suit est ce que j'ai actuellement. position.top est calculé pour être quelque chose comme 1200, qui met la boîte de dialogue bien en dessous du reste du contenu sur la page.

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

Comment puis-je trouver la bonne position?

Merci!

Answer 1

Comme alternative, vous pouvez utiliser le jQuery UI `` utilitaire par exemple

Answer 2

Grâce à des réponses ci-dessus, j’ai expérimenté et a finalement conclu que tout ce que vous devez faire est de modifier l’attribut de « position » dans définition de la boîte de dialogue modale :

JQuery eu aucun problème avec le texte « milieu » pour la valeur horizontale « X » et ma boîte de dialogue surgit au milieu, 20px vers le bas par le haut.

J’ai le cœur JQuery.

Answer 3

Après avoir lu toutes les réponses, cela a enfin fonctionné pour moi :

Answer 4

La prise de Jaymin l'exemple un peu plus loin, je suis venu avec cette pour le positionnement de jQuery ui-boîte de dialogue de l'élément au-dessus de l'élément que vous avez juste a cliqué (pensez à "bulle"):

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

Notez que j'ai "ouvert" de l'interface utilisateur-boîte de dialogue de l'élément avant de calculer la largeur relative et la hauteur des décalages. C'est parce que jQuery ne pouvons pas évaluer outerWidth() ou outerHeight() sans l'interface utilisateur de la boîte de dialogue d'élément physiquement apparaissant dans la page.

Juste être sûr de mettre le 'modal' à false dans votre boîte de dialogue options, et vous devriez être OK.

Answer 5

Découvrez quelques-unes des plugins jQuery pour d’autres implémentations d’une boîte de dialogue. ClueTip semble être un style riche tooltip/dialogue plug-in. La démo 4 ressemble à ce que vous essayez de le faire (même si je vois qu’il n’a pas l’option de positionnement précise que vous recherchez).