Das Dialogfeld der jQuery-Benutzeroberfläche ist nicht in der Mitte des Bildschirms positioniert

Question

Ich habe ein jQuery-Dialogfeld, das in der Mitte des Bildschirms positioniert werden soll.Allerdings scheint es vertikal etwas außermittig zu sein.

Hier ist der Code:

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

Irgendwelche Ideen, warum das nicht zentriert wird?

Answer 1

Wenn Ihr Ansichtsfenster nach dem Dialog-Displays gescrollt wird, wird es nicht mehr zentriert werden. Es ist möglich, das Ansichtsfenster unbeabsichtigt zu verursachen durch das Hinzufügen / Entfernen von Inhalten aus der Seite zu blättern. Sie können das Dialogfenster während Scroll rieren / Größe ändern Ereignisse durch den Aufruf:

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

Answer 2

Handelt es sich um jquery.ui.position.js auf Ihrer Seite? Ich hatte das gleiche Problem, den Quellcode geprüft hier und erkennen mich nicht hinzufügen, dass js auf meiner Seite, danach .. Dialog auf magische Weise zentriert ist.

Answer 3

ein altes Grab hier Graben, aber für neue Google-Suchende.

Sie können die Position des Modellfenster halten, wenn die Benutzer scrollt durch diese Veranstaltung zu Ihrem Dialog hinzufügen. Dadurch wird es von absolut positioniertes ändern fixiert. Keine Notwendigkeit zu überwachen Ereignisse zu scrollen.

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

Answer 4

Ich habe das gleiche Problem. Es endete als die jquery.dimensions.js Plugin. Wenn ich es entfernt, alles hat gut funktioniert. Ich schloss sie wegen einer anderen Plugin, das es erforderlich, jedoch fand ich von der Verbindung aus hier , die Dimensionen im jQuery Kern enthalten war eine ganze Weile her ( http://api.jquery.com/category/dimensions ). Sie sollten ok einfach werden immer von den Dimensionen befreien Plugin.

Answer 5

1.) Der jQuery-Dialog wird in dem Element zentriert, in das Sie ihn einfügen.

Ohne weitere Informationen vermute ich, dass Sie ein Body-Div mit einem Rand oder ähnlichem haben.Verschieben Sie das Popup-Div auf die Körperebene, und schon kann es losgehen.

2.) Wenn Sie beim Laden dynamisch Inhalte zum Div hinzufügen, ist die Zentrierung NICHT korrekt.Zeigen Sie das Div NICHT an, bis Sie die Daten haben, die Sie eingeben.

Answer 6

Einfach unter CSS Linie in derselben Seite hinzufügen.

.ui-dialog 
{
position:fixed;
}

Answer 7

Um dieses Problem zu beheben, stellte ich sicher, meine Körpergröße auf 100% gesetzt wurde.

body { height:100% }

Dies hält auch die Mittelposition, während der Benutzer scrollt.

Answer 8

Fügen Sie diese auf Ihre Dialog Erklärung

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

Beispiel:

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

Answer 9

Für mich jquery.dimensions.js war der Schuldige

Answer 10

Dieses Problem wird häufig im Zusammenhang den Dialog über einen Anker-Tag (<a href='#' id='openButton'>Open</a>) zu öffnen und nicht das Standard-Browser Verhalten im Handler beispiel zu verhindern.

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

Dies entfernt in der Regel die Notwendigkeit einer Positionierung / Scroll-Plug-In.

Answer 11

Ich war vor dem gleichen Problem der Dialog nicht Öffnung zentriert zu haben und meine Seite nach oben scrollen. Der Tag, den ich mit dem Dialog zu öffnen, ist ein Anker-Tag:

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

Das Pfund Symbol wurde das Problem verursacht für mich. Ich tat alles, war die href im Anker ändern wie folgt:

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

Nun meine Seite ist glücklich und Zentrieren der Dialoge.

Answer 12

Mein Szenario: Ich hatte auf Seite nach unten zu scrollen Dialog auf einer Schaltfläche klicken, um zu öffnen, aufgrund Fenster blättern Sie den Dialog nicht vertikal zu Fenstermitte öffnet, wurde sie aus der Sicht-Port gehen .

Ken oben erwähnt, nachdem Sie Ihre modalen Inhalt unter Anweisung ausführen gesetzt haben.

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

Wenn der Inhalt vorbelastet ist, bevor modale dies nur ausführen öffnet in offene Veranstaltung, manipulieren DOM sonst in offener Veranstaltung und dann Anweisung ausführen.

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

Es funktionierte gut für mich und das Beste ist, dass Sie keine anderen Plugins oder Bibliothek beinhalten, damit es funktioniert.

Answer 13

gelöst Genau das gleiche Problem wurde das Problem, dass ich einige js Dateien nicht importiert haben, wie widget.js:)

Answer 14

Keine der oben genannten Lösungen schien für mich zu arbeiten, da mein Code dynamisch generiert zwei containting divs und innerhalb dass ein un-cached Bildes. Meine Lösung war wie folgt:

Bitte beachten Sie die 'Last' auf img nennen, und die 'close' Parameter 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'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });

Answer 15

Ich habe dies auf die Spitze meiner HTML-Datei hinzufügen: <!doctype html>. Ich brauche nicht die position Eigenschaft festzulegen. Dies ist mit jQuery 3.2.1. In 1.7.1, das war nicht erforderlich.

Answer 16

Dies ist, wie ich das Problem gelöst, fügte ich diese offene Funktion des Dialogs:

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

Es öffnet sich nun das Dialog am oberen Rand des Bildschirms, egal wo die Seite und in allen Browsern gescrollt wird.

Answer 17

den Dialog in der Mitte des Bildschirms zu positionieren:

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

Answer 18

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

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

Answer 19

Sie müssen die Erklärung hinzufügen

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.

Answer 20

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

Diese Lösung funktioniert aber nur, weil die neueren jQuery Versionen dieses komplett zu ignorieren und wieder auf den Standard fallen, die genau dies ist. So können Sie gerade Position entfernen. ‚Zentrum‘ von Optionen, wenn Sie nur die Pop-up wollen zentriert werden