Modalboxen ohne Javascript

Auf fast jeder größeren Webseite sind sie zu finden. Modale Dialoge die ein Formular, Bild oder Hinweis mittig über der Seite einblenden. Es gibt daher zahlreiche Javascript Plugins die fast alle nach dem gleichen Prinzip funktionieren. Ein DIV.Container mit einer bestimmten Klasse ist zu Beginn unsichtbar und wird durch Klick auf einen Link oder Button aufgerufen. Mnache dieser Scripte sind jedoch über hundert KB schwer und benötigen eine eigene CSS-Datei mit Bildern oder Icon-Fonts.

modalbox

Viele Javascript-Funktionen wie Akkordeons, Tabs, Animation, Tooltips, PullDown-Menüs und sogar Modal Boxen lassen sich vollständig mit CSS3 ersetzen. Die Vorteile sind schlanke Seiten, sanfte Animationen und allgemeine Kompatibilität mit allen Auflösungen und Browsern ab IE10.

Ich habe das CSS etwas vereinfacht und auch die modal box so simpel wir möglich gehalten. Normalerweise hat man ein overlay das den Hintergrund abdunkelt sowie einen Header und Footer

Das Beispiel öffne mich
Der Aufruf
<a class="btn btn-default" href="#modal-info">öffne mich</a>
Das HTML für die Box
<div id="modal-info" class="modal">
 <div class="modal-container">
  <h3>Hallo ich bin ein Dialog</h3>
   <p>Und ich bin ein wichtiger Text...</p>
  <p><a class="btn btn-default" href="#">Schließen</a></p>
 </div>
</div>
Das CSS
/* das umgebende div für die eigentliche box  */
.modal {
  align-items: center;
  bottom: 0;
  display: none;
  justify-content: center;
  left: 0;
  opacity: 0;
  overflow: hidden; /* nicht sichtbar */
  padding: .4rem;
  position: fixed;
  right: 0;
  top: 0;
}
 
/* zeige div wenn target selector angesprungen wird  */
.modal:target {
  display: flex; /* anzeigen */
  opacity: 1;
  z-index: 400;
}
 
/* Animation einblenden der Box  */
.modal:target .modal-container {
  animation: slide-down .2s ease 1;
  z-index: 1;
}
 
/* Die eigentliche box mit weißem Hintergrund und Schatten  */
.modal-container {
  background: #fff;
  border-radius: .1rem;
  box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  max-width: 640px;
  padding: .8em;
  width: 100%;
}
 

Weitere Beispiele finden sich auf der Seite des CSS-Frameworks Spectre das, anders als z.B. Bootstrap, vollständig auf Javascript verzichtet. Auch das CSS für unser Beispiel haben wir ausgehend vom Spectre Code modifiziert und reduziert.

https://picturepan2.github.io/spectre/