web-dev-qa-db-fra.com

Positionnement du dialogue de l'interface utilisateur jQuery

J'essaie d'utiliser la bibliothèque interface utilisateur de la boîte de dialogue jQuery afin de positionner une boîte de dialogue à côté d'un texte lorsque celui-ci 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 (autrement dit, [0, 0] le placera toujours dans le coin supérieur gauche de la fenêtre de votre navigateur, quel que soit le lieu où vous vous trouvez actuellement. fait défiler jusqu'à). Cependant, le seul moyen que je connaisse pour récupérer l'emplacement est de l'élément par rapport à la page ENTIRE.

Ce qui suit est ce que j'ai actuellement. position.top correspond à environ 1200 ou environ, 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!

jqueryjquery-ui
112
Wickethewok

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 sonne de la même manière que ce que vous essayez de faire (même si je vois qu’elle n’a pas l’option de positionnement précise que vous cherchez.)

14
Ben Koehler

Vous pouvez également utiliser l’utilitaire jQuery UI Position p. Ex.

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
108
Brian M. Hunt

Grâce aux réponses ci-dessus, j'ai expérimenté et finalement constaté que tout ce que vous deviez faire était de modifier l'attribut "position" dans la définition de la boîte de dialogue Modal:

position:['middle',20],

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

Je cœur JQuery.

82
user1288395

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
Jaymin Patel

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"):

$('#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 je "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
markedup

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
xhochn

Vérifiez 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 centrée dans le contenu du document, mais pas dans la fenêtre, même si vous spécifiez la position: {my: 'center', à: 'centre', 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.

14
Daniel Flippance

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

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

...
    });
8
live-love
$(".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 un dialogue juste sous un élément. J'ai utilisé la fonction offset () simplement parce qu'elle calcule la position par rapport au coin supérieur gauche du navigateur, mais la fonction position () calcule la position par rapport à div parent ou iframe à ce parent de l'élément.

7
M. Belen

au lieu de faire du pur jquery, 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 est de positionner 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
Samuel

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

4
Philip Tinney

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

4
user363690

Je ne pense pas que la bulle est 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]);
}
4
cliff

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
Eduardo Cuomo

Voici le code .., comment positionner la boîte de dialogue de l'interface utilisateur jQuery sur le 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
Manu R S
$("#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
Günes Erdemi

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

2
neil tang

J'ai essayé toutes les solutions proposées, mais elles ne fonctionneront pas car le dialogue ne fait pas partie du document principal et aura sa propre couche (mais c'est ce que je suppose).

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

  3. Ensuite, obtenez le x et le y de la boîte de dialogue affichée (pas n'importe quel autre noeud 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 du dialogue et non du document et la position est modifiée en fonction du calque du dialogue.

2
Mr.Mountain

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. ci-dessous le code fait cela

            $(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
Kaustubh - KAY

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

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

ne changez jamais la position du dialogue lors de sa création.

Au lieu de, je change le niveau de sélecteur pour obtenir la totalité du dialogue.

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

Pour centrer mon dialogue, j'utilise le jQuery-Client-Centering-Plugin

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

1
jmozko

Vous pouvez 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 doit afficher la boîte de dialogue ci-dessous 100px ci-dessous.

0
sanjay jangid