Wie kann ich meinen jQuery Dialog positionieren zu zentrieren?

StackOverflow https://stackoverflow.com/questions/1839702

Frage

Ich habe folgenden Code versucht, aber es Positionen nur Dialoge obere Ecke Position Mitte links, und das macht Element nach rechts ausgerichtet werden. Wie kann ich Zentrum Dialog eigentliches Zentrum, die Elemente Breite zählt, so dass Mittellinie Dialog zu 50% 50% halfs geschnitten werden? 

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

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

War es hilfreich?

Lösung

Ich bin mir ziemlich sicher, dass Sie sollten nicht eine Position festlegen müssen: 

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

standardmäßig Zentrum sollte.

Ich habe in dem Artikel einen Blick, und auch geprüft, was es auf dem -ui Seite über einen Dialog Positionierung: und darin diskutiert wurden zwei Zustände von:. Initialisierung und nach Initialise

Code-Beispiele - (aus jQuery UI 2009-12-03)

Initialisieren einen Dialog mit der Position Option angegeben. 

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

Get oder setzt die Position Option, nach der init. 

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

Ich glaube, dass, wenn Sie die Position entfernen waren Attribut Sie würde es von selbst zentriert sonst die zweite Setter Option versuchen, wo Sie drei Elemente der „Option“ „Position“ und „Mitte definieren“.

Andere Tipps

Die neueste jQuery UI hat eine Position Komponente: 

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

Doc: http://jqueryui.com/demos/position/
Erhalten: http://jqueryui.com/download

Da der Dialog eine Position benötigen, benötigen Sie die js Position schließen 

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

Also, wenn jemand trifft diese Seite wie ich, oder wenn ich in 15 Minuten vergessen, ich bin mit jQueryUI Dialog Version 1.10.1 und jquery 1.9.1 mit IE8 in einem iframe (bla), und es muss eine innerhalb vorgegebener oder es nicht funktioniert, dh 

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

Dank @ vm370 für mich in der richtigen Richtung. 

open: function () {

    var win = $(window);

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

Mittelposition zu beheben, die ich benutze: 

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Try this .... 

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

Ich bin immer die besten Ergebnisse jQuery Dialog in der Mitte der Browser-Fenster setzen mit: 

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

Es ist wahrscheinlich genauer, wie es mit der Option auf Position " mit ", wie in der Dokumentation unter http://api.jqueryui.com/position/ aber ich bin in Eile ...

Ich habe zweimal Funktion dialog() rufen Sie 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
    }
});

Nach dem Positionsparameter für mich gearbeitet 

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

Viel Glück!

Jquery UI 1.9.2, Jquery und die späteren Versionen don‘Unterstützung IE8

fand ich zwei Lösungen dafür.

  1. Zurücksetzen auf jquery UI 1.7.2 IE8 zu unterstützen,

  2. Sie diesen Code mit Jquery UI 1.9.2 Versuchen 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

Nach der folgenden Diskussion das Problem weniger IE-Kompatibilität in den neueren Versionen jQuery zurückzuführen sein könnte, zurück zu 1.7.2 Zurücksetzen scheint das Problem zu lösen, das nur in IE8 auftritt. http://forum.jquery.com / Thema / jquery-ui-Dialog-Positionierung-nicht-Arbeits-in-ie-8

Eine andere Sache, die Sie die Hölle mit JQuery Dialog Positionierung geben kann, vor allem für Dokumente größer als der Browser-Ansicht Port - Sie müssen die Erklärung hinzufügen 

<!DOCTYPE html>

An der Spitze des Dokuments.

Ohne sie jquery neigt dazu, den Dialog auf dem unteren Rand der Seite und Fehler setzen kann auftreten, wenn man versucht, sie zu ziehen.

Wenn Sie einzelne jquery Dateien verwenden oder eine benutzerdefinierte Jquery herunterladen oder so stellen Sie sicher, Sie haben auch jquery.ui.position.js zu Ihrer Seite hinzugefügt.

Sind Sie mit in diese in nur IE? Wenn ja, versuchen Sie dies zur Ergänzung der ersten Zeile der Seite des HEAD-Tag: 

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

Ich hatte aber, dass alle Kompatibilitätsprobleme in späteren jQueries behoben wurden, aber ich lief in diese heute.

Versuchen Sie, diese für ältere Versionen und jemand, die nicht wollen Position verwenden: 

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

Sie müssen auch manuelle Neuzentrieren tun, wenn jQuery UI auf mobilen Geräten - der Dialog manuell über eine ‚linke & top‘ CSS-Eigenschaft positioniert. wenn der Benutzer Orientierung schaltet, wird die Positionierung nicht mehr zentriert und muss danach angepasst / neu zentriert werden.

Für Win7 / IE9 Umgebung nur in Ihrer CSS-Datei festgelegt: 

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

hatte ich ein Problem mit diesem und ich das endlich herausgefunden. Bis heute wurde ich mit einer wirklich alten Version von jQuery, Version 1.8.2.

überall, wo ich dialog benutzt hatte ich es mit der folgenden Position Option initialisiert hatte: 

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

Allerdings fand ich, dass position: "center" entfernen oder es mit der richtigen Syntax ersetzt hat nicht den Trick, zum Beispiel: 

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

Obwohl die oben richtig ist, ich war auch option mit der Position als Zentrum zu setzen, wenn ich die Seite geladen wird, in der alten Weise, etwa so: 

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

Dies wurde alle meine Dialogfenster verursacht nach oben links von der Sichtöffnung zu halten.

Ich hatte alle Instanzen diese mit der richtigen neuen Syntax ersetzen unten: 

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

ich mit CSS festgelegt: 

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

kann nicht erhalten IE9 den Dialog zu zentrieren.

regelte es durch diese Ergänzung der CSS: 

.ui-dialog {
    left:1%;
    right:1%;
}

Percent keine Rolle spielt. Jede kleine Zahl arbeitete.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top