Matze: kleine Lightbox selbst schreiben

Beitrag lesen

Hallo,

ich möchte mir eine Ligthbox schreiben.
Ich möchte in der Lightbox ein Formular und verschiedene andere Elemente platzieren. Es geht also nicht primär darum Bilder anzuzeigen.

Meine Google-Suche nach "JavaScript Lightbox Tutorial" gab mir zwar reichlich Ergebnisse aber die beschäftigen sich nur damit die bekannte Lightbox irgendwo einzubinden.

Sicher könnte ich mir auch das Lightbox-Script herunterladen und soweit wie möglich meinen Bedürfnissen anpassen, ich würde es aber viel lieber selbst schreiben um ein bisschen JS dazu zu lernen.

Vom Konzept her ist es vermutlich nicht viel mehr als ein Div mit höchstem z-index über die gesamte Fensterfläche zu legen.
In dem Div kann ich die anderen Elemente dann wie gewohnt platzieren.
Das sollte mit createElement und appendChild nicht so schwer werden.

Um das dann optisch nicht ganz so langweilig erscheinen zu lassen bietet sich das Einblenden der Hintergrundfarbe des Div an (Hintergrund abdunkeln) bis es fast nicht mehr transparent ist.
Wie wird sowas gemacht, dass es in den gängigen Browsern funktioniert?

In dem Div mit dem abgedunkelten Hintergrund möchte ich dann mittig, als "Arbeitsfläche" ein weiteres Div mit weißem Hintergrund platzieren.
Mit welchem Effekt das eingeblendet werden soll überleg ich mir noch ;)

Es ist also irgendwie mehr oder weniger Standard-Kram.
Nur weiß ich leider überhaupt nicht wo ich ansetzen muss.
Könntet ihr mir beim einblenden der Divs helfen oder mir einen Link zu einem Beispiel geben?

Herzlichen Dank!

Matze