CSS-Popup: Relativ zu aktueller Scrollposition

simusch

Aktives Mitglied
Thread Starter
Dabei seit
27.09.2004
Beiträge
2.030
Reaktionspunkte
219
Hallo zusammen

Ich stehe wieder einmal vor einem relativ kleinen Problem, trotzdem sehe ich gerade nicht durch.

Ich möchte:

In einer ziemlich langen Webseite (Vertikal) irgendwo auf einen Link klicken (z.B. "Löschen") und nun soll im Browserfenster, auf der Höhe der aktuellen Scroll-Position, ein Div-Container eingeblendet werden, wo die Löschaktion bestätigt wird.
Mir springt die Seite logischerweise immer ganz nach oben, weil da auch der Container unsichtbar liegt.

Ich habe auf der Facebook-Seite ein solches Ding gefunden, und zwar wenn man in einer umfangreichen Freundes-Liste auf "Als Freund hinzufügen" klickt. Hier poppt ein Div-Layer auf, der stets abhängig von der Scroll-Position platziert wird.
Hier habe ich auch herausgefunden, dass dies so geschieht:

Code:
<div class="generic_dialog pop_dialog" style="">
    <div class="generic_dialog_popup" style="top: 2943px;">
    </div>
</div>

Dass also die top-position in den Code geschrieben wird.

Wie soll das aber gehen???

- Woher weiss ich die aktuelle Scrollposition (JavaScript) aus der ich den top-Wert ableiten kann?
- Kann ich unmittelbar vor dem einblenden des "generic_dialog_popup"-Divs den Wert noch anpassen, so dass die Position aktualisiert wird?

Danke für eure Hilfe, dies wird mein Projekt deutlich aufwerten :)

Simu
 
Du könntest mit position: relative; und entsprechenden top und left Werten arbeiten. Das relative bezieht sich dann auf das nächsthöhere Element oder auf das umschliessende Element - je nach Aufbau des Codes.
 
ich hatte bereits mit einem position:fixed versucht, das Div scrollt auch schön brav mit, aber sobald ich über AJAX den Inhalt neu befülle, springt es wieder nach oben.

Wie soll ich deine Idee mit position:relative verwirklichen? Das ist ja genau das, was facebook macht, aber ich müsste ja den top-Wert irgendwie angeben... So dass es egal bei welcher Scrollposition am richtigen Ort erscheint... Da sitzt für mich das Problem.

EDIT:
Hier noch ein Schnippsel aus dem CSS von facebook:

Code:
.generic_dialog {
    height:0px;
    left:0px;
    overflow:visible;
    position:absolute;
    top:0px;
    width:100%;
    z-index:100;
}

.generic_dialog .generic_dialog_popup {
    height:0px;
    overflow:visible;
    position:relative;
}

.generic_dialog div.dialog_loading {
    background-color:#f2f2f2;
    border:1px solid #606060;
    font-size:24px;
    padding:10px;
}
Da wird auch mit relative gearbeitet, aber eben die top-position direkt im html notiert...

Simu
 
Hallo!

Eigentlich müsste das, was du willst, mit position:fixed funktionieren. Der IE kanns aber bis Version 6 nicht richtig.
Wie wird das Div befüllt?

Grüße
andi42
 
Zuletzt bearbeitet:
Unter Firefox 2 und Opera 9 tritt das Problem bei mir nicht auf, das div bleibt immer am selben Platz, wenn man auf einen Link klickt.
Übrigens: der IE7 verhält sich beim Scrollen auf der Seite gaaanz seltsam :rolleyes: (siehe Bild im Anhang)

mfg
andi42
 
Zurück
Oben Unten