Einfache Lightbox mit CSS und JavaScript

(5B5XWKFMHCC4) Lightboxes oder auch manchmal Greyboxes genannt findet man mittlerweile ziemlich häufig im Internet und auch einer unserer vorangegangenen Blog-Beiträge befasst sich damit. An dieser Stelle möchte ich eine einfache Variante vorstellen, welche ohne separate Komponenten (JavaScript (*.js) – Datei) auskommt. Die vielen Scripte, welche es hierzu im Web gibt, haben alle bestimmte Vorzüge und warten auch mit vielen möglichen grafischen Effekten auf. Die hier vorgestellt Variante ist durch jeden einfach und schnell umzusetzen und mit Hilfe CSS bieten sich auch hier viele Formatierungsmöglichkeiten

Eine Lightbox zeigt einen angeklickten/ausgewählten Inhalt wie ein PopUp an und dunkelt dabei den Hintergrund ab. Die nachfolgenden Bilder zeigen mögliche Anwendungsbeispiele.

Beispiel 1:

Der Inhalt der Lightbox kann ein Bild, ein Anmeldeformular oder jeglicher anderer HTML-Code sein.

Beispiel 2:

Um eine solche Lightbox zu erzeugen muss der HTML-Code folgenden prinzipiellen Aufbau haben:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
<html>
<head>
<title>LIGHTBOX BEISPIEL</title>
<style>

   .black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
	}

   .white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 25%;
	height: 25%;
	padding: 16px;
	border: 5px solid grey;
	background-color: white;
	z-index:1002;
	overflow: auto;
		}</style>
</head>
<body>
<p> Hier wird der normale Seiten-Inhalt angezeigt. Um den Lightbox-Inhalt anzuzeigen hier 
 <a href = "javascript:void(0)" 
onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
 klicken.</a></p>
  <div id=“light” class=“white_content”>

Hier ist der Inhalt der Lightbox zu sehen.

<a href = “javascript:void(0)”
 onclick=“document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none'”>

Schließen

</a>

</div>
 <div id=“fade” class=“black_overlay”></div> 
</body> 
</html>

.black_overlay ist die CSS-Klasse, welche das Aussehen des abdunkelnden Hintergrunds beschreiben.

.white_content beschreibt die Darstellung des im Vordergrund zu sehenden Fensters.

Beide CSS-Klassen beinhalten die Eigenschaften display, position, top, left, width, height und background-color, welche das prinzipielle Erscheinungsbild beschreiben.
Mit display wird gesteuert, ob der betreffende Style angezeigt wird und mit position wird das prinzipielle Verhalten der Ausrichtung bestimmt. Mit top, left bestimmen Sie die Position der oberen linken Ecke eines Elements. Variieren Sie diese Werte bei .white_content, um die Lage auf dem Bildschirm zu bestimmen. Mit width und height legen Sie die Breite und Höhe des betreffenden Elements fest und mit background-color die Hintergrundfarbe. Um festzulegen, wie stark der Hintergrund zu sehen sein soll, muss die Transparenzeigenschaft opacity eingestellt werden.
Der z-index ist bei dieser Vorgehensweise elementar, da mit diesem gesteuert wird in welcher Reihenfolge die Elemente angezeigt werden. Hier soll das kleine Fenster mit dem weißen Hintergrund vor dem leicht transparenten dunklen Hintergrund angezeigt werden. Deshalb muss der z-index von .white_color größer sein als der von .black_overlay.
Mit der Eigenschaft overflow wird eingestellt, wie sich das Element verhält, wenn der Inhalt mehr Platz benötigt als mit den Eigenschaften width und height zur Verfügung steht.

Zwischen den body-Tags der HTML-Seite werden nun zwei div-Elemente (“light” und “fade”) angelegt, welche jeweils die Formatierungen .white_content und .black_overlay erhalten.

Zwei kleine Zeilen JavaScript Code eingebettet jeweils in einem Link steuern nun über die display-Eigenschaft, ob die beiden div-Element angezeigt oder ausgeblendet werden.

Der hier vorgestellte html-Code kann nun in die eigene Webseite eingebaut werden und mit den gewünschten Inhalten belebt werden. Durch ein wenig Ausprobieren bei den Einstellungen der CSS-Klassen bekommt man schnell ein Gefühl dafür, was die einzelnen Eigenschaften machen und kann so das Design an seine jeweiligen Anforderungen anpassen.

Kommentar hinterlassen Antworten abbrechen