jQuery UI dialogue positionnement

J'essaie d'utiliser la bibliothèquejQuery dialog UI afin de positionner une boîte de dialogue à côté d'un texte lorsqu'elle est survolée. 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 actuelle (en d'autres termes, [0, 0] Le 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). Cependant, la seule façon que je connaisse pour récupérer l'emplacement est de l'élément par rapport à L'ensemble page.

Ce qui suit est ce que j'ai actuellement. position.top est calculé comme 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!

108
demandé sur Wickethewok 2009-04-13 20:50:09

21 réponses

Découvrez quelques-uns 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 (bien que je vois qu'il n'a pas l'option de positionnement précis que vous recherchez.)

13
répondu Ben Koehler 2016-10-25 23:01:07

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

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
106
répondu Brian M. Hunt 2010-07-14 15:07:37

Merci à quelques réponses ci-dessus, j'ai expérimenté et finalement trouvé que tout ce que vous devez faire est d'éditer 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 "milieu" pour la valeur horizontale "X" et ma boîte de dialogue est apparue au milieu, 20px en bas du haut.

Je cœur JQuery.

78
répondu user1288395 2012-03-23 21:02:52

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]);
});
42
répondu Jaymin Patel 2010-01-20 02:04:01

Prenant L'exemple de Jaymin un peu plus loin, je suis venu avec ceci pour positionner un élément jQuery ui-dialog au-dessus de l'élément que vous venez de cliquer (pensez à "speech bubble"): 

$('#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. En effet, jQuery ne peut pas évaluer outerWidth() 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.

16
répondu markedup 2011-01-16 08:42:41

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");
});
15
répondu xhochn 2013-02-26 11:30:42

Vérifiez votre <!DOCTYPE html>

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

Par exemple: http://jsfiddle.net/npbx4561 / - Copiez le contenu de la fenêtre Exécuter et supprimez le DocType. Enregistrer en HTML et exécuter pour voir le problème.

13
répondu Daniel Flippance 2015-01-23 10:14:06 
$(".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 parent div ou iframe ce parent de l'élément.

7
répondu M. Belen 2011-09-23 13:15:27

Pour le placer directement au-dessus du contrôle, vous pouvez utiliser ce code: 

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

...
    });
7
répondu live-love 2014-06-12 20:38:25

Au lieu de faire du 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.

6
répondu Samuel 2012-02-21 13:26:35

Cette page montre comment déterminer votre décalage de défilement. jQuery peut avoir des fonctionnalités similaires mais je ne pouvais pas le trouver. En utilisant la fonction getScrollXY affichée sur la page, vous devriez être en mesure de soustraire les coordonnées x et y de la .position() résultats.

4
répondu Philip Tinney 2009-04-13 19:46:14

Un peu en retard mais vous pouvez le faire maintenant en utilisant $j (object).offset().gauche et .top en conséquence.

4
répondu user363690 2010-06-10 16:30:16

Je ne pense pas que la bulle soit tout à fait juste. Je l'ai un peu modifié pour que cela fonctionne et 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]);
}
4
répondu cliff 2010-08-20 14:47:04

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)
    });
}
3
répondu Eduardo Cuomo 2013-08-02 14:17:26

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');

   });
3
répondu Manu R S 2013-10-28 17:00:46 
$("#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});              
         }
    });
3
répondu Günes Erdemi 2015-04-08 06:58:23

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. initialise la boîte de dialogue avec $("#dialog").dialog("option", "position", 'top')
  2. Ouvrez-le avec $(dialog).dialog("open");

  3. Ensuite, obtenez 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 changée en fonction de la couche de la boîte de dialogue.

2
répondu Mr.Mountain 2012-11-26 12:37:28

J'ai essayé de nombreuses façons de centrer ma boîte de dialogue sur la page et j'ai vu que le code:

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

Ne modifiez jamais la position de la boîte de dialogue lorsque celle-ci a été créée.

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

$("#dialog").parent()

Pour centrer ma boîte de dialogue, j'utilise jQuery-client-centrage-Plugin

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

1
répondu jmozko 2012-03-22 02:03:35

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

1
répondu neil tang 2012-05-12 22:24:06

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 fait ceci 

            $(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]
                            });
            })
1
répondu Kaustubh - KAY 2013-10-23 21:22:15

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

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

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

0
répondu sanjay jangid 2017-06-08 07:10:21