Positionnement de la boîte de dialogue de l'interface utilisateur jQuery

116

J'essaie d'utiliser la bibliothèque d'interface utilisateur de dialogue jQuery afin de positionner une boîte de dialogue à côté d'un texte lorsqu'il est survolé. La boîte de dialogue jQuery prend un paramètre de position qui est mesuré à partir du coin supérieur gauche de la fenêtre courante (en d'autres termes, le [0, 0]placera toujours dans le coin supérieur gauche de la fenêtre de votre navigateur, quel que soit l'endroit où vous faites défiler actuellement). Cependant, le seul moyen que je connaisse pour récupérer l'emplacement est de l'élément relatif à la page ENTIER.

Voici ce que j'ai actuellement. position.topest calculé pour être quelque chose comme 1200 ou plus, ce qui place la boîte de dialogue bien en dessous du reste du contenu de la page.

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

Comment puis-je trouver la bonne position?

Merci!

jquery jquery-ui Wickethewok
la source
2
Depuis la version 1.9, il existe un widget d'info-bulle natif.
theblang

Réponses:

13

Découvrez certains des plugins jQuery pour d'autres implémentations d'une boîte de dialogue. Cluetip semble être un plug-in de style info-bulle / dialogue riche en fonctionnalités. La 4ème démo ressemble à ce que vous essayez de faire (même si je vois qu'elle n'a pas l'option de positionnement précis que vous recherchez.)

Ben Koehler
la source
Lien rompu. J'ose dire que ce plugin n'est plus maintenu. Peut-être serait-il sage de choisir une autre réponse?
JohnK le
109

Comme alternative, vous pouvez utiliser l' utilitaire jQuery UI Position, par exemple

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
Brian M. Hunt
la source
29
C'est la meilleure approche. Je noterai cependant que si vous créez le dialogue pour la première fois, vous aurez besoin d'un appel supplémentaire pour dialogaimer ceci:$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
wsanville
26
L'utilitaire de position de l'interface utilisateur jQuery ne fonctionne pas sur les éléments masqués, vous devez donc ouvrir la boîte de dialogue avant de la positionner avec ce code.
Toadmyster
1
jQuery UI est le meilleur moyen de le faire. Scott González a une explication approfondie du fonctionnement de jQuery UI et de son utilisation
strangeloops
Je trouve déroutant que, par exemple, il doit être: at: 'top+50'au lieu deat: 'top + 50'
Lamy
pour tous ceux qui ont du mal (comme je l' $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
étais
81

Grâce à quelques réponses ci-dessus, j'ai expérimenté et finalement trouvé que tout ce que vous avez à faire est de modifier l'attribut "position" dans la définition de la boîte de dialogue modale:

position:['middle',20],

JQuery n'a eu aucun problème avec le texte "du milieu" pour la valeur "X" horizontale et ma boîte de dialogue est apparue au milieu, 20px en bas du haut.

Je cœur JQuery.

user1288395
la source
Fonctionne sans plugins supplémentaires et intuitif. La meilleure solution que j'ai vue.
PlanetUnknown
Solution incroyablement simple, sans plugins supplémentaires. Cela devrait être la réponse acceptée.
kamui du
13
Darn, c'est bien mais c'est obsolète- "Remarque: les formulaires String et Array sont obsolètes." api.jqueryui.com/dialog/#option-position Vous devez donc utiliser l'objet de position my / at / of thingy. Voir le lien sur "jQuery UI Position". Vous pouvez obtenir quelque chose comme la position: {my: "center top", at: "center top + 20", of: window} pour fonctionner comme vous le souhaitez. Voir le lien pour plus d'exemples.
mikato
@mikato ... selon jquery ui 1.10 , position accepte la chaîne et le tableau. ... ... mais j'aime toujours la notation objet (j'aime les touches).
dsdsdsdsd
3
Je ne peux pas croire que vous ayez besoin d'autant de code juste pour positionner une fenêtre de dialogue.
Gi1ber7
42

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

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});
Jaymin Patel
la source
Cette réponse a fonctionné pour moi et m'a probablement sauvé de nombreuses minutes / heures de recherche sur Google sur la configuration des autres solutions. Je vous remercie!
Nathan
1
+1 Cela m'a beaucoup aidé quand j'ai compris .position () donne la position relative et .offset (), la position absolue (ce dont j'avais besoin)
daniloquio
16

Prenant l'exemple de Jaymin un peu plus loin, j'ai proposé ceci pour positionner un élément jQuery ui-dialog au-dessus de l'élément sur lequel vous venez de cliquer (pensez "bulle de dialogue"):

$('#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'ouvre l'élément ui-dialog avant de calculer les décalages relatifs de largeur et de hauteur. Cela est dû au fait que jQuery ne peut pas évaluer externalWidth () ou outerHeight () sans que l'élément ui-dialog n'apparaisse physiquement dans la page.

Assurez-vous simplement de définir «modal» sur false dans vos options de dialogue et vous devriez être OK.

balisé
la source
1
Je pense que vos deux variables signifiaient être myDialogXetmyDialogY
casey
16

http://docs.jquery.com/UI/API/1.8/Dialog

Exemple de dialogue fixe dans le coin supérieur gauche:

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});
xhochn
la source
pour moi, c'était le plus simple à suivre, juste un attribut et vous obtenez la solution. Je ne savais pas que la "position" pouvait être mentionnée avec cette syntaxe entre crochets avec hauteur / largeur, etc.
user734028
je n'ai aucune idée, il y a trop longtemps: D
xhochn
15

Vérifier votre <!DOCTYPE html>

J'ai remarqué que si vous manquez le <!DOCTYPE html>du haut de votre fichier HTML, la boîte de dialogue est affichée centrée dans le contenu du document et non dans la fenêtre, même si vous spécifiez la position: {my: 'center', at: 'center' , de: fenêtre}

EG: http://jsfiddle.net/npbx4561/ - Copiez le contenu de la fenêtre d'exécution et supprimez le DocType. Enregistrez au format HTML et exécutez pour voir le problème.

Daniel Flippance
la source
2
C'était exactement le problème que j'avais et cela l'a résolu.
BobRodes
1
Ma transformation xml n'a pas réussi à ajouter le doctype, cette réponse avec: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt a fait bouger les choses pour moi.
Daniel Bower
1
Je souhaite plus d'un vote pour cette excellente réponse. Cela a résolu mon problème pour lequel je luttais pendant des heures.
Dr DS
10

Pour le mettre juste au-dessus du contrôle, vous pouvez utiliser ce code:

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });
l'amour en direct
la source
7 
$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

Positionne une boîte de dialogue juste sous un élément. J'ai utilisé la fonction offset () juste parce qu'elle calcule la position par rapport au coin supérieur gauche du navigateur, mais la fonction position () calcule la position par rapport au div parent ou iframe ce parent de l'élément.

M. Belen
la source
6

au lieu de faire jquery pur, je ferais:

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

si je comprends bien votre question, le code que vous avez positionne la boîte de dialogue comme si la page n'avait pas de défilement, mais vous voulez qu'elle prenne en compte le défilement. mon code devrait le faire.

Samuel
la source
Pour une raison quelconque, document.scrollleft n'est pas défini pour moi.
Wickethewok
2
mon mauvais, son défilementGauche scrollTop oublié de capitaliser
Samuel
var x = el.position (). gauche + el.outerWidth (); var y = el.position (). top - $ (document) .scrollTop (); travaillé pour moi. Le problème est que je ne peux pas obtenir la hauteur et la largeur de la boîte de dialogue après avoir modifié les informations qu'elle contient.
rball
4

Cette page montre comment déterminer votre décalage de défilement. jQuery peut avoir des fonctionnalités similaires mais je ne l'ai pas trouvé. En utilisant la fonction getScrollXY affichée sur la page, vous devriez pouvoir soustraire les coordonnées x et y des résultats .position ().

Philip Tinney
la source
4

un peu tard mais vous pouvez le faire maintenant en utilisant $ j (object) .offset (). left et .top en conséquence.

user363690
la source
4

Je ne pense pas que la bulle de dialogue ait tout à fait raison. Je l'ai légèrement modifié pour que cela fonctionne et que l'élément s'ouvre juste sous le lien.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
falaise
la source
3

Pour fixer la position centrale, j'utilise:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
Eduardo Cuomo
la source
3

Voici le code .., comment positionner la boîte de dialogue jQuery UI au centre ......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });
Manu RS
la source
3 
$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });
Günes Erdemi
la source
2

vous pouvez utiliser $(this).offset(), la position est liée au parent

neil tang
la source
2

J'ai essayé toutes les solutions proposées mais elles ne fonctionneront pas car la boîte de dialogue ne fait pas partie du document principal et aura sa propre couche (mais c'est ma supposition éclairée).

  1. Initialisez le dialogue avec $("#dialog").dialog("option", "position", 'top')
  2. Ouvrez-le avec $(dialog).dialog("open");

  3. Ensuite, récupérez les x et y de la boîte de dialogue affichée (pas n'importe quel autre nœud du document!)

    var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

    var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

    $(dialog).dialog('option', 'position', [xcoord , ycoord]);

De cette façon, les coordonnées proviennent de la boîte de dialogue et non du document et la position est modifiée en fonction du calque de la boîte de dialogue.

Monsieur Montagne
la source
1

J'ai essayé de nombreuses façons d'obtenir mon dialogue centré sur la page et j'ai vu que le code:

$("#dialog").dialog("option", "position", 'top')

ne changez jamais la position de la boîte de dialogue lors de sa création.

Au lieu de, je change le niveau du sélecteur pour obtenir la boîte de dialogue entière.

$("#dialog").parent() <- C'est l'objet parent que la fonction dialog () crée sur le DOM, c'est parce que le sélecteur $ ("# dialog") n'applique pas les attributs, en haut, à gauche.

Pour centrer ma boîte de dialogue, j'utilise le plugin jQuery-Client-Centering-Plugin

$ ("# dialog"). parent (). centerInClient ();

jmozko
la source
1

les solutions ci-dessus sont très vraies ... mais la boîte de dialogue de l'interface utilisateur ne conserve pas la position après le redimensionnement de la fenêtre. le code ci-dessous le fait

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })
Kaustubh - KAY
la source
0

Vous pouvez définir la position supérieure avec style pour l'affichage au centre, vu que le code:

.ui-dialog {haut: 100px! important;}

Ce style doit afficher la boîte de dialogue 100px ci-dessous à partir du haut.

sanjay jangid
la source