wake-up-neo.net

jqueryui-Dialogpositionierung

Ich verwende die JQuery-Benutzeroberfläche und möchte mein Dialogfeld horizontal zentriert, aber vertikal über der Mitte positionieren, möglicherweise um eine feste Pixelanzahl oder einen relativen Abstand vom oberen Rand der Seite. Gibt es einen einfachen Weg, dies zu tun? Es sieht so aus, als gäbe es nur ein paar vordefinierte Werte oder ich kann eine genaue Position verwenden, aber gibt es eine einfache Möglichkeit, dies zu erreichen? 

 $("#dialog-form").dialog({
                autoOpen: false,
                width: 630,
                position: 'center',
                modal: true,
                resizable: false,
                closeOnEscape: false

            });
jqueryhtmlcssjquery-uijquery-ui-dialog
23
Joe Cartano

Verwenden Sie die Option position , um den oberen Rand des Dialogs am oberen Rand des Fensters (plus Pixel- oder Prozentversatz) auszurichten.

Dies sollte den Dialog horizontal zentrieren und 150 Pixel von oben positionieren.

$("#dialog-form").dialog({
    autoOpen: false,
    width: 630,
    position: { my: 'top', at: 'top+150' },
    modal: true,
    resizable: false,
    closeOnEscape: false
});

Ältere Versionen von jQuery UI verwendeten ein Array, das ein [x, y] -Koordinatenpaar in Pixelversatz von der linken oberen Ecke des Ansichtsfensters enthält (z. B. [350,100]).

var dialogWidth = 630;
$("#dialog-form").dialog({
    // ...
    width: dialogWidth,
    position: [($(window).width() / 2) - (dialogWidth / 2), 150],
    // ...
});
74
mr.moses

Das hat bei mir funktioniert 

 position: { my: "center", at: "center", of: window },

Sie können hier auch die Dialogpositionen überprüfen
Position finden

2
Dragon

ich bin auf diese Frage gestoßen, als ich nach der gleichen Frage suchte, aber ich hatte bereits meine Antwort:

position: ['center', 'top+100']

dies wird horizontal zentriert und 100 Pixel von oben

das funktioniert auch

position: ['center', 'center+100']

horizontal zentrieren und 100 Pixel von unterhalb zentrieren

1
Exlord

Ich habe die Antwort von Exlord angepasst.

Position: ["Mitte-7%", "Mitte-12%"]

Dies passt sich horizontal und vertikal an

$(".popup").dialog({    
position: ['center-7%', 'center-12%'],
title: 'Updating',
    width: "auto",
}
});
0
Mikeys4u

Versuche dies:

    position: {
        my: 'top',
        at: 'top',
        of: $('#some-div')
    },
0
Ahmed

Wenn jemand einen Link erstellt, der ein jQuery-Dialogfeld öffnet, weil der Link class einen Click-Event-Handler hat, werden Sie may bemerken, dass er möglicherweise an den oberen Rand der Seite springt Erstellen Sie den modalen Dialog weiter unten auf der Seite und Sie müssen dorthin scrollen.

Wenn jemand nur versucht, das jQuery-Dialogfeld daran zu hindern, nach oben zu springen, und möchte, dass es in der Nähe des von Ihnen angeklickten Links bleibt, entfernen Sie einfach href. Fast wahnsinnig versucht, dies zu lösen. Die HTML5-Spezifikation versteht anscheinend href="" oder href="#" bedeutet nach oben gehen.

0
DMadden51
position: { 
   my: 'top', 
   at: 'top+150' 
}

Arbeitete für mich.

0
Santosh Bt