wake-up-neo.com

Wie kann ich mein jQuery-Dialogfeld zentrieren?

Ich habe folgenden Code ausprobiert, aber er positioniert nur die Position der linken oberen Ecke in der Mitte, wodurch das Element nach rechts ausgerichtet wird. Wie kann ich den Dialog auf die echte Mitte zentrieren, wobei die Breite der Elemente zählt, so dass die Mittellinie den Dialog auf 50% bis 50% halbiert?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

jqueryjquery-uidialogjquery-dialog
63
newbie

Ich bin mir ziemlich sicher, dass Sie keine Position setzen müssen:

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

sollte standardmäßig zentriert werden .

Ich sah mir den Artikel an und überprüfte auch, was auf der offiziellen Jquery-ui-Site zum Positionieren eines Dialogs steht: Und darin wurden zwei Zustände besprochen: initialize und after initialize.

Codebeispiele - (entnommen aus der jQuery UI 2009-12-03)

Initialisieren Sie einen Dialog mit der angegebenen Positionsoption.

$('.selector').dialog({ position: 'top' });

Hole oder setze die Positionsoption nach init.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

Ich denke, wenn Sie das Positionsattribut entfernen würden, würden Sie es zentriert finden. Andernfalls versuchen Sie die zweite Setteroption, in der Sie 3 Elemente für "Option" "Position" und "Mitte" definieren.

47
Luke Duddridge

Die neueste jQuery-Benutzeroberfläche hat eine Positionskomponente:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc: http://jqueryui.com/demos/position/
Holen Sie sich: http://jqueryui.com/download

65
WhyNotHugo

Da der Dialog eine Position benötigt, müssen Sie die js-Position angeben

<script src="jquery.ui.position.js"></script>
18
projo

Wenn also jemand auf diese Seite kommt oder wenn ich es in 15 Minuten vergessen habe, verwende ich jqueryui dialog version 1.10.1 und jquery 1.9.1 mit ie8 in einem iframe (blah) und es muss ein angegebenes oder es funktioniert nicht, dh.

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Vielen Dank an @ vm370 für die richtige Richtung.

11
Mike
open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}
9
Jean Paul A.K.A el_vete

Um die Mittelposition festzulegen, verwende 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)
    });
}
7
Eduardo Cuomo

Versuche dies....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});
6
Rikin Patel

Die besten Ergebnisse erhalten Sie, wenn Sie den jQuery-Dialog in die Mitte des Browserfensters stellen:

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

Es gibt wahrscheinlich eine genauere Methode, um es mit der Option "using" zu positionieren, wie in der Dokumentation unter http://api.jqueryui.com/position/ beschrieben, aber ich habe es eilig ...

6
derekg

Ich muss die Funktion dialog() zweimal aufrufen, um den Dialog zu positionieren (jQuery v1.11.2/jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});
5
okki

Der folgende Positionsparameter hat für mich funktioniert

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

Viel Glück!

4
Rakesh Prajapati

Jquery UI 1.9.2, jquery und die neueren Versionen unterstützen IE8 nicht 

Dafür habe ich zwei Lösungen gefunden. 

  1. Rollback auf jquery UI 1.7.2 zur Unterstützung von IE8,

  2. Versuchen Sie diesen Code mit Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }
4
r-arun-r

Eine weitere Sache, die Ihnen bei der Positionierung von JQuery Dialog eine Hölle bereiten kann, insbesondere für Dokumente, die größer als der Browser-Ansichts-Port sind, müssen Sie die Deklaration hinzufügen

<!DOCTYPE html>

Oben in Ihrem Dokument.

Wenn dies nicht der Fall ist, neigt Jquery dazu, den Dialog am unteren Rand der Seite zu platzieren, und beim Ziehen kann es zu Fehlern kommen.

3
thedrs

Laut der folgenden Diskussion könnte das Problem auf eine geringere IE -Kompatibilität in den neueren jQuery-Versionen zurückzuführen sein, und ein Zurücksetzen auf 1.7.2 scheint das Problem zu beheben, das nur in IE8 auftritt. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

3
vm370

Für die Win7/IE9-Umgebung einfach in Ihre CSS-Datei setzen:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}
2
Nikolay

Wenn Sie einzelne Jquery-Dateien oder einen benutzerdefinierten Jquery-Download verwenden, stellen Sie sicher, dass Sie auch jquery.ui.position.js zu Ihrer Seite hinzugefügt haben. 

2
Ioannis Suarez

Stoßen Sie nur in IE darauf? Wenn dies der Fall ist, fügen Sie dies der ersten Zeile des Tags HEAD Ihrer Seite hinzu:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Ich hatte zwar gedacht, dass alle Kompatibilitätsprobleme in späteren Versionen behoben wurden, aber heute bin ich auf dieses Problem gestoßen.

2
John

Versuchen Sie dies für ältere Versionen und für jemanden, der Position nicht verwenden möchte:

$("#dialog-div-id").dialog({position: ['center', 'top'],....
2
Aneesh Vijendran

Sie müssen auch die manuelle Neuzentrierung durchführen, wenn Sie jquery ui auf mobilen Geräten verwenden. Der Dialog wird manuell über eine css-Eigenschaft "left & top" positioniert. wechselt der Benutzer die Orientierung, ist die Positionierung nicht mehr zentriert und muss danach angepasst/neu zentriert werden.

2
gekido

Ich hatte ein Problem damit und habe es endlich herausgefunden. Bis heute habe ich eine sehr alte Version von jQuery, Version 1.8.2, verwendet.

Überall, wo ich dialog verwendet hatte, hatte ich es mit der folgenden Positionsoption initialisiert:

$.dialog({
    position: "center"
});

Ich fand jedoch heraus, dass das Entfernen von position: "center" oder das Ersetzen durch die richtige Syntax nicht den Trick bewirkte, zum Beispiel:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

Obwohl das oben Genannte korrekt ist, habe ich option verwendet, um die Position als Mitte festzulegen, als ich die Seite auf die alte Art und Weise geladen habe:

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

Dies führte dazu, dass alle meine Dialogfenster oben links im Ansichtsfenster klebten.

Ich musste alle Instanzen mit der korrekten neuen Syntax unten ersetzen:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);
1
Luke

Ich habe mit css korrigiert: 

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}
0
Liko