Positionierung des jQuery UI-Dialogfelds

116

Ich versuche das zu benutzen jQuery-Dialog-UI- Bibliothek zu verwenden, um ein Dialogfeld neben einem Text zu positionieren, wenn der Mauszeiger darüber bewegt wird. Das jQuery-Dialogfeld verwendet einen Positionsparameter, der in der oberen linken Ecke des aktuellen Ansichtsfensters gemessen wird (mit anderen Worten, [0, 0]wird immer in der oberen linken Ecke Ihres Browserfensters platziert, unabhängig davon, wohin Sie gerade gescrollt haben). Die einzige Möglichkeit, die Position abzurufen, ist das Element relativ zur GESAMTEN Seite.

Folgendes habe ich derzeit. position.topwird auf ungefähr 1200 berechnet, wodurch der Dialog weit unter dem Rest des Inhalts auf der Seite liegt.

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

Wie finde ich die richtige Position?

Vielen Dank!

jquery jquery-ui Wickethewok
quelle

2

Ab Version 1.9 gibt es ein natives Tooltip-Widget.

Theblang

13

Schauen Sie sich einige der jQuery-Plugins für andere Implementierungen eines Dialogfelds an. Cluetip scheint ein funktionsreiches Tooltip- / Dialog-Plug-In zu sein. Die 4. Demo klingt ähnlich wie das, was Sie versuchen (obwohl ich sehe, dass sie nicht die genaue Positionierungsoption hat, nach der Sie suchen.)

Ben Koehler
quelle

Defekter Link. Ich glaube, dieses Plugin wird nicht mehr gepflegt. Vielleicht wäre es ratsam, eine andere Antwort zu wählen?

JohnK

109

Alternativ können Sie das Dienstprogramm jQuery UI verwenden,Position z

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

Brian M. Hunt
quelle

29

Dies ist der beste Ansatz. Ich werde jedoch bemerken, dass, wenn Sie den Dialog zum ersten Mal erstellen, Sie einen zusätzlichen Anruf benötigen, um dies zu dialogmögen:

$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });

wsanville

26

Das Positionsdienstprogramm für die jQuery-Benutzeroberfläche funktioniert nicht bei versteckten Elementen. Sie müssen daher den Dialog öffnen, bevor Sie ihn mit diesem Code positionieren können.

Toadmyster

1

Die jQuery-Benutzeroberfläche ist der beste Weg, dies zu tun. Scott González hat eine ausführliche Erklärung, wie jQuery UI funktioniert und wie man es benutzt

Strangeloops

Ich finde es verwirrend, dass es zB sein muss: at: 'top+50'stattat: 'top + 50'

Lamy

Für alle, die (wie ich es gerade war) $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

Probleme haben

81

Dank einiger Antworten oben habe ich experimentiert und festgestellt, dass Sie lediglich das Attribut "Position" in der Definition des Modaldialogs bearbeiten müssen:

position:['middle',20],

JQuery hatte keine Probleme mit dem "mittleren" Text für den horizontalen "X" -Wert und mein Dialogfeld wurde in der Mitte angezeigt, 20 Pixel nach unten.

Ich liebe JQuery.

user1288395
quelle

Funktioniert ohne zusätzliche Plugins und intuitiv. Beste Lösung, die ich gesehen habe.

PlanetUnknown

Fantastisch einfache Lösung ohne zusätzliche Plugins. Dies sollte die akzeptierte Antwort sein.

Kamui

13

Verdammt, das ist schön, aber veraltet. "Hinweis: Die Formulare String und Array sind veraltet." api.jqueryui.com/dialog/#option-position Sie müssten also das Positionsobjekt my / at / of thingy verwenden. Siehe den dortigen Link zu "jQuery UI Position". Sie könnten so etwas wie Position: {my: "center top", at: "center top + 20", of: window} so einstellen, wie Sie möchten. Weitere Beispiele finden Sie unter dem Link.

Mikato

@mikato ... gemäß jquery ui 1.10 akzeptiert position den String und das Array. ... ... aber ich mag immer noch die Objektnotation (ich mag die Tasten).

dsdsdsdsd

3

Ich kann nicht glauben, dass Sie so viel Code benötigen, um ein Dialog-Popup zu positionieren.

Gi1ber7

42

Nachdem ich alle Antworten gelesen hatte, funktionierte dies schließlich für mich:

$(".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
quelle

Diese Antwort hat bei mir funktioniert und mir wahrscheinlich viele Minuten / Stunden beim Googeln beim Einrichten der anderen Lösungen erspart. Danke dir!

Nathan

1

+1 Es hat mir sehr geholfen, als ich verstanden habe, dass .position () die relative Position und .offset () die absolute Position (was ich brauchte)

angibt

16

Als ich Jaymins Beispiel noch einen Schritt weiter ging, kam ich auf diese Idee, um ein jQuery-UI-Dialogelement über dem Element zu positionieren, auf das Sie gerade geklickt haben (denken Sie an "Sprechblase"):

$('#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] );

Beachten Sie, dass ich das UI-Dialog-Element "öffne", bevor ich die relativen Breiten- und Höhenversätze berechne. Dies liegt daran, dass jQuery OuterWidth () oder OuterHeight () nicht auswerten kann, ohne dass das UI-Dialog-Element physisch auf der Seite angezeigt wird.

Stellen Sie einfach sicher, dass 'modal' in Ihren Dialogoptionen auf false gesetzt ist, und Sie sollten a-OK sein.

markiert
quelle

1

Ich denke, Ihre beiden Variablen sollten myDialogXundmyDialogY

casey

16

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

Beispiel für einen festen Dialog in der linken oberen Ecke:

$("#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
quelle

Für mich war dies am einfachsten zu befolgen, nur ein Attribut und Sie erhalten die Lösung. Ich wusste nicht, dass "Position" mit dieser Syntax in eckigen Klammern zusammen mit Höhe / Breite usw. dort oben erwähnt werden kann.

user734028

Ich habe keine Ahnung, ist zu lange her: D

Xhochn

15

Überprüfe dein <!DOCTYPE html>

Ich habe das bemerkt, wenn du das verpasst <!DOCTYPE html> der Dialog zentriert im Dokumentinhalt und nicht im Fenster angezeigt wird den oberen Rand Ihrer HTML-Datei , auch wenn Sie die Position angeben: {my: 'center', at: 'center' , von: window}

EG: http://jsfiddle.net/npbx4561/ - Kopieren Sie den Inhalt aus dem Ausführungsfenster und entfernen Sie den DocType. Als HTML speichern und ausführen, um das Problem zu sehen.

Daniel Flippance
quelle

2

Dies war genau das Problem, das ich hatte, und das hat es behoben.

BobRodes

1

Bei meiner XML-Transformation konnte der Doctype nicht hinzugefügt werden. Diese Antwort zusammen mit: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt brachte die Dinge für mich ins Rollen.

Daniel Bower

1

Ich wünsche mehr als 1 Gegenstimme für diese großartige Antwort. Es hat mein Problem behoben, um das ich stundenlang gekämpft habe.

Dr. DS

10

Verwenden Sie diesen Code, um die Kontrolle zu verbessern:

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

...
    });

Live-Liebe
quelle

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]});
}

Positioniert einen Dialog direkt unter einem Element. Ich habe die Funktion offset () verwendet, nur weil sie die Position relativ zur oberen linken Ecke des Browsers berechnet, aber die Funktion position () berechnet die Position relativ zum übergeordneten div oder iframe des übergeordneten Elements des Elements.

M. Belen
quelle

6

anstatt reine jquery zu machen, würde ich tun:

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

Wenn ich Ihre Frage richtig verstehe, positioniert der Code, den Sie haben, den Dialog so, als hätte die Seite keinen Bildlauf, aber Sie möchten, dass der Bildlauf berücksichtigt wird. Mein Code sollte das tun.

Samuel
quelle

Aus irgendeinem Grund ist document.scrollleft für mich nicht definiert.

Wickethewok

2

mein schlechtes, sein scrollLeft scrollTop hat vergessen, groß zu schreiben

Samuel

var x = el.position (). left + el.outerWidth (); var y = el.position (). top - $ (document) .scrollTop (); arbeitete für mich. Das Problem ist, dass ich die Höhe und Breite des Dialogfelds nicht ermitteln kann, nachdem ich die darin enthaltenen Informationen geändert habe.

Ball

4

Diese Seite zeigt, wie Sie Ihren Bildlaufversatz bestimmen. jQuery hat möglicherweise ähnliche Funktionen, aber ich konnte sie nicht finden. Mit der auf der Seite gezeigten Funktion getScrollXY sollten Sie in der Lage sein, die x- und y-Koordinaten von den Ergebnissen von .position () zu subtrahieren.

Philip Tinney
quelle

4

etwas spät, aber Sie können dies jetzt tun, indem Sie $ j (Objekt) .offset (). left und .top entsprechend verwenden.

user363690
quelle

4

Ich denke nicht, dass die Sprechblase ganz richtig ist. Ich habe es ein wenig optimiert, damit es funktioniert und das Element direkt unter dem Link geöffnet wird.

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

Cliff
quelle

3

Um die Mittelposition zu fixieren, benutze ich:

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
quelle

3

Hier ist der Code .., wie man den jQuery UI-Dialog zum Zentrieren positioniert ......

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
quelle

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
quelle

2

Sie können verwenden $(this).offset(), Position ist mit dem Elternteil verbunden

Neil Tang
quelle

2

Ich habe alle vorgeschlagenen Lösungen ausprobiert, aber sie funktionieren nicht, da der Dialog nicht Teil des Hauptdokuments ist und eine eigene Ebene hat (aber das ist meine fundierte Vermutung).

Initialisieren Sie den Dialog mit $("#dialog").dialog("option", "position", 'top')
Öffne es mit $(dialog).dialog("open");
Holen Sie sich dann das x und y des angezeigten Dialogfelds (kein anderer Knoten des Dokuments!)

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

Auf diese Weise stammen die Koordinaten aus dem Dialogfeld und nicht aus dem Dokument, und die Position wird entsprechend der Ebene des Dialogfelds geändert.

Mr.Mountain
quelle

1

Ich habe auf viele Arten versucht, meinen Dialog auf der Seite zu zentrieren, und festgestellt, dass der Code:

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

Ändern Sie niemals die Dialogposition, wenn diese erstellt wurde.

Stattdessen ändere ich die Auswahlstufe, um den gesamten Dialog zu erhalten.

$("#dialog").parent() <- Dies ist das übergeordnete Objekt, das die Funktion dialog () im DOM erstellt. Dies liegt daran, dass der Selektor $ ("# dialog") die Attribute oben links nicht anwendet.

Um meinen Dialog zu zentrieren , verwende ich das jQuery-Client-Centering-Plugin

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

jmozko
quelle

1

Die obigen Lösungen sind sehr zutreffend ... aber der UI-Dialog behält die Position nicht bei, nachdem die Fenstergröße geändert wurde. Der folgende Code macht dies

            $(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
quelle

0

Sie können die oberste Position stilvoll für die Anzeige in der Mitte festlegen und sehen, dass der Code:

.ui-dialog {oben: 100px! wichtig;}

Dieser Stil sollte das Dialogfeld 100px unten von oben anzeigen.

Sanjay Jangid
quelle

Positionierung des jQuery UI-Dialogfelds

Antworten: