Ich habe eine Webseite mit einer langen Liste von Produkten. Neben jedem Produkt befindet sich ein Link, über den man Details zu dem Produkt anzeigen kann. Die Details werden in einem modalen Fenster angezeigt. Das Ziel ist es, das gleiche Verhalten zu erhalten, das man beim Betrachten von Bildern auf Facebook erleben kann:
- das modale Fenster wird auf ~50px von oben angezeigt
- wenn die Höhe des modalen Fensters größer ist als die Höhe des Ansichtsfensters, kann der Benutzer nach unten scrollen (die Bildlaufleiste arbeitet jetzt in Richtung des modalen Fensters, NICHT in Richtung der Seite, die sich im Hintergrund befindet)
- Wenn das modale Fenster geschlossen wird, befindet sich der Benutzer in der Produktliste an der gleichen Position wie vor dem Öffnen des modalen Fensters.
Ich bin fast fertig, bis auf die letzte Anforderung. Die Art, wie ich dies implementiert haben, ist durch einfaches Öffnen des modalen Fensters mit JS und dann verwenden:
var winH = window.pageYOffset + 50
$('#show_message_overlay').css('top', winH+"px");um das modale Fenster zu positionieren.
Sie können gerne einen besseren Ansatz vorschlagen.
Danke für jede Hilfe.
