In einem meiner Projekte stand ich vor der Frage, wie ich es schaffe, ein Formular zur Eingabe von Daten in eine Liste, die ich dann komplett ausgebe, möglichst schön und platzsparend unter zu bringen.
Gleichzeitig soll das Eingabefeld eines Datums über ein Kalender-Overlay befüllt werden.
Ich entschloss mich also das Formular in eine Lightbox zu packen und somit nur sichtbar werden zu lassen, wenn der User auch wirklich was eingeben möchte.
Lightboxen findet man im Internet nahezu wie Sand am Meer. Meist werden diese mittels einer Javascript Datei (.js) eingebunden. Hier hatte ich allerdings jedes Mal das Problem, dass Kalender-Overlay hinter der Lightbox öffnete, was eine Bedienung unmöglich macht.
Ich suchte also nach weiteren Möglichkeiten und fand schließlich eine Lightbox zur Darstellung einer Bildergalerie, die weitestgehend auf html und CSS setzte und nur minimal Javascript beinhaltete.
Diese habe ich mir dann dahingehend modifiziert, dass sie meinen optischen Ansprüchen genügte und mein html Formular statt dem Bild anzeigte.
Falls jemand ein eine ähnliche Anwendung hat, möchte ich hier meinen modifizierten Code zur Verfügung stellen.
Zunächst packt man in den Header das einzige an Javascript, was für diese Lightbox nötig ist:
<script>
function openmodul() {
document.getElementById("modulbox").style.display = "block";
}
function closemodul() {
document.getElementById("modulbox").style.display = "none";
}
</script>
Es handelt sich hierbei ausschließlich um Aufrufe, die die BoxID ein- bzw. ausblenden.
Anschließend braucht man einen Trigger, der die Lightbox aufruft. Ich habe hier einen einfachen Linktext genommen. Der eigentliche Link werweißt auf „javascript:;“.
Das onclick Event verweist auf das zuvor angelegte Script und führt dazu, dass der html-Container eingeblendet wird.
<a href="javascript:;" onclick="openmodul();"> Neuer Eintrag </a>
Nun kommt der Abschnitt des eigentlichen Contents. Dieser ist in diverse DIV-Container geschachtelt, die ein Styling erlauben.
<div class="mod-content">
<div id="modulbox" align="center" class="modul">
<span class="close cursor" onclick="closemodul()">×</span>
<div class="hidden-content">
Hier steht dein html/php Code
</div>
</div>
</div>
Mehr ist es prinzipiell nicht, alles Weitere wird nun über CSS im Styling erreicht.
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 50px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
Dies erstellt das bekannte X in weiß zum Schließen der Lightbox mit einer netten Hover Opitk.
Anschließend noch das Styling der DIV-Container
.mod-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
.modul {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-image:url(../img/blackpixel.png);
background-repeat:repeat;
/* background-color: black;*/
}
Bei der Modulbox habe ich die Hintergrundfarbe „black“ auskommentiert. Das Stellt den Hintergrund der Lightbox dar. Ein flächiges Schwarz war mir da aber zu mächtig.
Statt dessen habe ich mir einen schwarzen Pixel mit einer Farbsättigung von ca 80% (Link anklicken, auf der neuen Seite Rechtsklick – Speichern unter) erstellt und dieses als Hintergrund eingebunden und flächig wiederholt. Dieses bildet dann eine Art verdunkelten Hintergrund, durch den man aber noch die eigentliche Seite sehen kann.
Anschließend habe ich die Box für den Inhalt noch mit einem weißen Hintergrund versehen, die Breite angepasst und einen inneren „Rahmen“ von 10px gesetzt.
#hidden-content {
background-color: #ffffff;
width: 400px;
padding: 10px 10px 10px 10px;
}
Schon sollte die Lightbox funktionieren.
Ich hoffe, dass ich in meiner Beschreibung nichts vergessen habe. Viel Spaß damit!
