Modalbox ohne Javascript

Das heutige Tutorial stammt von Annis6. Vielen Dank dafür!

Modalboxen gibt es in den unterschiedlichsten Variationen. Entweder sie werden als Hinweisboxen verwendet oder enthalten Daten von Charakteren oder zeigen ein bestimmtes Objekt genauer. Meist sorgt ein Javascriptcode für das auftauchen bzw. verschwinden der Box und das Aussehen bestimmt unser gutes CSS. Dank CSS3 jedoch haben wir die Möglichkeit eine Modalbox ohne die Verwendung von Javascript zu erstellen! Die Dateien und eine Vorschau zu diesem Tutorial findet ihr am Ende dieses Beitrages.

Das Hilfsmittel dazu ist der Selektor :target. Target kommt aus dem Englischen und bedeutet Ziel. Mit :target überprüft man einen Ankeridentifikator mtihilfe einer ID.

Als Beispiel:
Du hast eine Box mit der Klasse ‚box‘ und die ID ‚box_1‘. Der CSS Code sieht wie folgt aus:

.box {
    display: none;
    width: 250px;
    height: 150px;
 
    font-size: 0.85em;
    font-family: Verdana;
}

.box:target {
    display: block;
}

Hast du einen Link angeklickt, welcher folgendermaßen aussieht:

<a href=“#box_1“>Klick mich!</a>

So wird die Box durch die ID angesprochen und das display ist dann block! So wird auch die Modalbox durch dieses Prinzip erstellt!

Schritt 1: Die Box!

Zuerst machst du dir Gedanken darüber, wie die Box aussehen soll. Daher wäre es sinnvoll, sie sichtbar zu halten, solang du mit dem Design deiner Modalbox nicht zufrieden bist.
Ich habe mich für folgenden Stylesheet entschieden:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:1; /* Erst auf 1 um die Modalbox zu sehen und stylen zu müssen, später auf 0 setzen */
    pointer-events: none;
}

.modal_header {
    margin: auto;
    padding: 2px;
    text-transform: uppercase;
    background-color: #adadad;
}

.modal_container {
    position: relative;
    width: 60%;
    margin: 10% auto;
    padding: 1%;
    background-color: #fff;
}

Mein dazugehöriger HTML Code sieht so aus:

<div id="open" class="modalDialog">
    <div class="modal_container">
         <a href="#close" title="Close" class="close">X</a>
        <div class="modal_header">
            Überschrift
        </div>
        Hier kommt der Text in der Modalbox hinein. Lass dir was einfallen ;)
    </div>
</div>

2. Schritt der "Auftaucheffekt"!

Mit dem Befehl "display" kann man dies auch bewerkstelligen, aber mit einem übergleitenden Effekt benötigt man zum Beispiel opacity . Folgendes musst du in deinen Code einfügen:

Bei modalDialog das opacity auf 0, sodass die Box unsichtbar ist. Hinzu fügst du zu dem Code folgende Zeilen hinzu:

-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;

Dieser Code für den Übergangseffekt bezieht sich aber nur auf die Änderung in opacity. Möchtest du noch etwas hinzufügen oder ändern, ersetzt das opacity durch etwas anderes oder nutzt das all, sodass er auf alle Änderungen, die darin passieren, Rücksicht nimmt.

3. Schritt: Der Ausgang

Nun hast du in deiner Modalbox den Übergang, aber noch nicht das Ziel, wie es nach dem Klick aussehen sollte! Dafür erstellst du einen Code, welcher folgendermaßen lautet:

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

Zu guter Letzt noch einen Link um die Modalbox zu aktivieren:

<a href="#open">Open Modal</a>

4. Schritt: Close Button

Man möchte ja auch wieder die Modalbox schließen können dazu fügst du im CSS folgendes ein:

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover {
    background: #00d9ff;
}

So und nun nochmal der ganze Code als Abschluss! Der HTML-Code für die Modalbox:

<a href="#open">Open Modal</a>
<div id="open" class="modalDialog">
    <div class="modal_container">
        <a href="#close" title="Close" class="close">X</a>
        <div class="modal_header">
            Überschrift
        </div>
        Hier kommt der Text in der Modalbox hinein. Lass dir etwas einfallen ;)
    </div>
</div>

Der Style für deine .css:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:0; /* Erst auf 1 um die Modalbox zu sehen und stylen zu müssen, später auf 0 setzen */
    pointer-events: none; -webkit-transition:opacity 500ms ease-out;
    -moz-transition:opacity 500ms ease-out;
    -o-transition:opacity 500ms ease-out;
    transition:opacity 500ms ease-out;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modal_header {
    margin: auto;
    padding: 2px;
    text-transform: uppercase;
    background-color: #adadad;
}
.modal_container {
    position: relative;
    width: 60%;
    margin: 10% auto;
    padding: 1%;
    background-color: #fff;
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover {
     background: #00d9ff;
}

Fertig ist die Modalbox
Inspiration für dieses Skript ist dieser Code: http://jsfiddle.net/raving/1mhsynmw/

Fertiger Code downloaden

• Vorschau
• Dateien downloaden