it-swarm.com.de

das jQuery UI-Dialogfeld ist nicht in der Mitte des Bildschirms positioniert

Ich habe ein jQuery-Dialogfeld, das in der Mitte des Bildschirms positioniert werden soll. Es scheint jedoch vertikal etwas versetzt zu sein. 

Hier ist der Code:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

Irgendwelche Ideen, warum dies nicht zentriert wird?

38
David

Wenn Ihr Ansichtsfenster nach dem Anzeigen des Dialogfelds gescrollt wird, wird es nicht mehr zentriert. Es ist möglich, das Ansichtsfenster unbeabsichtigt durch das Hinzufügen/Entfernen von Inhalt zur Seite zu verschieben. Sie können das Dialogfenster während der Bildlauf-/Größenänderungsereignisse erneut aufrufen, indem Sie Folgendes aufrufen:

$('my-selector').dialog('option', 'position', 'center');
50
Ken Browning

Fügen Sie Ihrer Seite jquery.ui.position.js hinzu? Ich hatte das gleiche Problem, überprüfte den Quellcode hier und stellte fest, dass ich js nicht zu meiner Seite hinzugefügt habe, danach ... der Dialog wurde magisch zentriert.

34
Eugenio Miró

Hier ein altes Grab ausheben, aber für neue Google-Suchende.

Sie können die Position des Modellfensters beibehalten, wenn der Benutzer einen Bildlauf durchführt, indem Sie dieses Ereignis Ihrem Dialog hinzufügen. Dies ändert es von absolut positioniert zu fixiert. Keine Überwachung der Scroll-Ereignisse erforderlich.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}
28
jfraser

Ich hatte das gleiche Problem. Es wurde das jquery.dimensions.js Plugin. Wenn ich es entfernte, funktionierte alles gut. Ich habe es wegen eines anderen Plugins hinzugefügt, das es benötigte, jedoch fand ich aus dem Link hier heraus, dass Dimensionen vor einiger Zeit in den jQuery-Kern aufgenommen wurden ( http://api.jquery.com/category/ Maße ). Sie sollten in Ordnung sein, indem Sie einfach das Dimensions-Plugin loswerden.

14
coryvb123

Fügen Sie einfach die CSS-Zeile auf derselben Seite hinzu.

.ui-dialog 
{
position:fixed;
}
10
Rajkishor Sahu

1.) Das jQuery-Dialogfeld zentriert sich in dem Element, in das Sie es einfügen. 

Ohne weitere Informationen schätze ich, dass Sie ein Body-Div mit einem Rand oder etwas Ähnlichem haben. Bewegen Sie das Popup-Div auf die Körperebene, und Sie können loslegen.

2.) Wenn Sie dem div dynamisch hinzufügen, während Sie es laden, ist die Zentrierung NICHT korrekt. Zeigen Sie das div NICHT an, bis Sie die Daten haben, die Sie in das Verzeichnis einfügen.

10
Stefan Kendall

Fügen Sie dies Ihrer Dialogdeklaration hinzu

my: "center",
at: "center",
of: window

Beispiel:

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})
6
Taksh

Um dieses Problem zu beheben, stellte ich sicher, dass meine Körpergröße auf 100% eingestellt war.

body { height:100% }

Dadurch wird auch die Mittelposition beibehalten, während der Benutzer blättert.

4
user781058

Für mich war jquery.dimensions.js der Täter

3
Eswar

Dieses Problem hängt häufig mit dem Öffnen des Dialogfelds über ein Ankertag (<a href='#' id='openButton'>Open</a>) zusammen und verhindert nicht das Standardverhalten des Browsers im Handler, z.

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

Dadurch werden normalerweise keine Positionierungs-/Scrolling-Plugins benötigt.

3
Rob Willis

Ich hatte das gleiche Problem, dass der Dialog nicht zentriert geöffnet wurde und ich meine Seite nach oben scrollen konnte. Das Tag, das ich zum Öffnen des Dialogs verwende, ist ein Ankertag: 

<a href="#">View More</a> 

Das Pfund-Symbol verursachte das Problem für mich. Alles, was ich tat, war, den href im Anker so zu modifizieren: 

<a href="javascript:{}">View More</a> 

Jetzt ist meine Seite glücklich und zentriert die Dialoge.

2
Jimbo

Mein Szenario: Ich musste auf der Seite nach unten scrollen, um das Dialogfeld mit einem Klick zu öffnen. Aufgrund des Bildlaufs des Fensters öffnete sich das Dialogfeld nicht vertikal von Fenster zu Fenster.

Wie Ken oben erwähnt hat, führen Sie die folgenden Anweisungen aus, nachdem Sie Ihren modalen Inhalt festgelegt haben.

$("selector").dialog('option', 'position', 'center');

Wenn der Inhalt vor dem Öffnen von Modal vorgeladen wird, führen Sie dies einfach in einem offenen Ereignis aus Else manipuliert DOM in einem offenen Ereignis und führt dann die Anweisung aus.

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

Es hat gut für mich funktioniert, und das Beste ist, dass Sie kein anderes Plugin oder eine andere Bibliothek mitbringen, damit es funktioniert.

2
Sanjeev

Ich musste dies oben in meine HTML-Datei einfügen: <!doctype html>. Ich musste die position-Eigenschaft nicht festlegen. Dies ist mit jQuery 3.2.1. In 1.7.1 war das nicht nötig.

1
user2233706

Keine der oben genannten Lösungen schien für mich zu funktionieren, da mein Code dynamisch zwei enthaltende Divs und ein nicht zwischengespeichertes Bild generiert. Meine Lösung war wie folgt:

Bitte beachten Sie den Aufruf 'load' bei img und den Parameter 'close' im Dialogaufruf.

 var div = jQuery ('<div> </ div>') 
 .attr ({id: 'previewImage'}) 
 .appendTo ('body') 
 .hide (); 
 var div2 = jQuery ('<div> </ div>') 
 .css ({
 maxWidth: parseInt (jQuery (window) .width () * .80) + 'px' 
, maxHeight: parseInt (jQuery (window) .height () * .80) + 'px '
, Überlauf:' auto '
}) 
 .appendTo (div); 
 var img = jQuery ('<img>') 
 .attr ({'src': url}) 
 .appendTo (div2) 
 .load (function () {
 div.dialog ({
 'modal': wahr 
, 'width': 'auto' 
, close: function () {
 div.remove.) (); 
} 
}); 
}); 
1
shmuel613

Ich habe gerade das gleiche Problem gelöst, das Problem war, dass ich keine js-Dateien wie widget.js importiert habe :)

1
vach

so positionieren Sie den Dialog in der Mitte des Bildschirms:

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});
0
Omar Ben Salah

Sie müssen die Deklaration hinzufügen

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.

0
thedrs

Ich hatte das gleiche Problem, das behoben wurde, als ich eine Höhe für den Dialog eingab:

$("#dialog").dialog({
    height: 500,
    width: 800
});
0
Carl

So habe ich das Problem gelöst, ich habe diese offene Funktion des Dialogs hinzugefügt:

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

Dies öffnet jetzt den Dialog am oberen Bildschirmrand, unabhängig davon, wohin die Seite und in allen Browsern gescrollt wird.

0
Nick Benedict
$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Diese Lösung funktioniert jedoch nur, weil die neueren jQuery-Versionen dies vollständig ignorieren und auf den Standardwert zurückfallen, der genau dieser Wert ist .. Sie können also einfach position: "center" aus Ihren Optionen entfernen, wenn Sie nur das Popup-Fenster öffnen möchten zentriert sein.

0