CSS3 Lightbox

[molily]

Hallo!

<a class="lightbox-close" href="#"></a>

Naja, die CSS-Lightbox funktioniert über den :target-Selektor. Wenn der Fragment Identifier (#foo) in der Adresse auf das Element zeigt, ist es sichtbar. Wenn nicht, dann nicht.

Um die Lightbox auszublenden, muss mittels <a href="#"> zurück auf »#« gelinkt werden. Da springt der Browser nunmal an den Dokumentanfang. (Oder auf irgendeinen Fragment Identifier, der nicht auf ein Lightbox-Element zeigt. Das ist aber auch nicht wünschenswert.)

Endlich eine, die ohne JS auskommt

Mit CSS alleine lässt sich das nicht lösen. Ein Grund, warum ich von solchen Lösungen mit :target abrate. Eine sauber umgesetzte JavaScript-Lightbox kann die Lightbox beim Klick schließen, ohne dass zum Dokumentanfang navigiert wird.

Grüße
Mathias