Wie zentriert modaler Dialog im gescrollten Fenster mit absoluter Position?

7

Ich versuche, einen modalen Dialog im gescrollten Fenster zu zentrieren. Dieses Modal ist absolute Position, da es im Bildschirm ziehbar sein muss. Ich benutze dieses Plugin für ziehbare Funktion:

Ссылка

Mein Problem ist, dass dieses Modal die absolute Position hat, wenn ich top setze: 50% zeigt es modal im mittleren Fenster an, aber nicht das gesamte gescrollte Fenster.

    
paganotti 25.09.2012, 16:05
quelle

5 Antworten

11

Sie sollten

verwenden %Vor%

stattdessen absolut / relativ.

  

position: fixed Das Element ist relativ zum Browserfenster positioniert.

Verwenden Sie dies, und Sie sollten keine Probleme durch Scrollen haben.

Ссылка

Sie können diese Themen auch sehen:

Feste Positionierung ohne Scrollen

Wie Sie ein Div-Center von platzieren das Fenster nach dem Scrollen

    
gotqn 25.09.2012 16:10
quelle
11

Ihr Dialog hat also seine Position auf absolut eingestellt und es ist ein unmittelbares Kind des Dokuments / Körpers, richtig!

Zentrieren eines angeforderten Modals mit absoluter Position:

%Vor%     
Stphane 25.09.2012 16:34
quelle
1

Wenn es sich in einem scrollbaren div befindet, stellen Sie sicher, dass das ursprüngliche div: <div style="position:relative;"> .

ist

Auf diese Weise wird ein div darin, das absolut ist, innerhalb der Grenzen davon bleiben und sein übergeordnetes relatives div als Referenzpunkt für top:50%;

verwenden     
quelle
1

Im Allgemeinen finden Sie den Mittelpunkt des Ansichtsfensters mit Bildlaufleisten. Nimm die Fensterhöhe, geteilt durch 2, plus Scroll oben. Ergebnis ist die Anzahl der Pixel, die etwas von der Dokumentenspitze versetzt werden soll.

Wenn Ihr positioniertes Element ein untergeordnetes Element von mehr als einem scrollbaren Element ist, müssen Sie diese berücksichtigen, aber die grundlegende Mathematik ist die gleiche.

Als eine Randnotiz würde ein Beispiel für das Markup, das Sie verwenden möchten, dazu beitragen, genauere Antworten zu erhalten.

    
Rozwel 25.09.2012 16:16
quelle
0

Versuchen Sie, die Positionsoption

zu löschen %Vor%     
KristKing 18.08.2016 03:25
quelle