CSS - Lightbox
Siehe auch: CSS - Modal-Fenster mit HTML5 und CSS3
<style>
/* Ungeöffnete Lightbox */
.lightbox {
display: none;
}
/* Geöffnete lightbox */
.lightbox:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Lightbox Inhalt */
.lightbox figcaption {
width: 25rem;
position: relative;
padding: 1.5em;
background-color: Lightgreen;
}
/* Button zum Schließen */
.lightbox .close {
position: relative;
display: block;
}
.lightbox .close::after {
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
position: absolute;
display: flex;
z-index: 1;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 50%;
color: white;
content: "×";
cursor: pointer;
}
/* Lightbox Überlagerung (Overlay) */
.lightbox .close::before {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,.7);
content: "";
cursor: default;
}
</style>
<ul>
<li><a href="#beispiel1">Öffne Beispiel #1</a></li>
<li><a href="#beispiel2">Öffne Beispiel #2</a></li>
</ul>
<div class="lightbox" id="beispiel1">
<figure>
<a href="#" class="close"></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
</figure>
</div>
<div class="lightbox" id="beispiel2">
<figure>
<a href="#" class="close"></a>
<figcaption>Cras risus odio, pharetra nec ultricies et,
mollis ac augue. Nunc et diam quis sapien dignissim auctor.
Quisque quis neque arcu, nec gravida magna.</figcaption>
</figure>
</div>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<small> Physische Auszeichnung
CSS - Animierte Box mit Keyframes
JavaScript - https und den Querystring aus der URL entfernen