CSS-Trick: Dialogfenster mit Backdrop ohne zusätzliches HTML

Viele Web-Applikationen verwenden Dialogfenster zur Kommunikation mit den Benutzern. Sie dienen der Information und der Dateneingabe.

Solche Dialogfenster mit CSS zu erstellen wirft einige Schwierigkeiten auf. So muss das Fenster zentriert werden (kompliziert bei absolut/fix positionierten Elementen) und meistens möchte man einen Backdrop.

Backdrop ist ein Gestaltungsmittel, das den Fokus auf das Dialogfenster legt, indem es den Hintergrund nach schwarz ausblendet. Dies hilft, das Dialogfenster hervorzuheben.

In den meisten Anleitungen, die ich zu diesem Thema finden konnte, funktioniert dieser Backdrop so, dass man entweder ein zweites Element verwendet, oder dem <body>-Element eine Klasse gibt:

<div class="dialog-backdrop">
    <div class="dialog">
        <!-- Hier kommt der Inhalt rein -->
    </div>
</div>

Das funktioniert zwar, ist aber unschön, da zusätzliche Elemente das JavaScript komplexer machen. Außerdem gibt es Probleme mit der Semantik.

Glücklicherweise gibt es in CSS3 die Pseudoelemente ::before und ::after. Diese ermöglichen es einem, ein Element an den Anfang oder an das Ende des DOMs des jeweiligen Elementes einzufügen.

Bei der Verwendung von Pseudoelementen gibt es jedoch einige Tücken und Schwierigkeiten. Darum werde ich meinen Lösungsansatz vorstellen:

Am Anfang werden noch keine Pseudoelemente verwendet. Das sieht dann so aus:

Wenn wir dann ein ::before-Pseudoelement verwenden wollen, um einen grauen Hintergrund einzufügen, können wir diesen Code verwenden:

.dialog::before {
  content: '';
  display: block;
  background-color: rgba(0,0,0,0.6);
  z-index: -2;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
}

Dieser Code erstellt ein ::before-Pseudoelement, weist diesem einen halbtransparenten Hintergrund zu und positioniert es fix, so dass es den ganzen Bildschirm bedeckt. Der negative z-index ist notwendig, damit das Pseudoelement hinter dem .dialog-Element bleibt.

Mit diesem Code haben wir nun einen grauen Hintergrund, nur leider bedeckt dieser auch den Dialog:

Das ist natürlich unschön. Zum Glück gibt es aber eine Lösung: Noch mehr Pseudoelemente!!

Tatsächlich können wir ein zweites Pseudoelement (::after) verwenden, das zwischen Hintergrund und Text liegt und so den weißen Hintergrund wiederherstellt:

.dialog::after {
  content: '';
  display: block;
  background-color: #fff;
  z-index: -1;
  position: absolute;
  top: 0; left: 0; right: 0;   bottom: 0;
  border-radius: 2px;
}

Diesmal erstellen wir wieder ein Pseudoelement; diesmal weisen wir ihm allerdings einen weißen Hintergrund zu und geben ihm einen höheren z-index. Auch wenden wir position:absolute an, damit der Dialograhmen nicht überschritten wird. Wichtig ist noch, den border-radius des Dialog-Elements zu übernehmen, damit die runden Ecken beibehalten werden.

Diese Lösung führt dann zur gewünschten Ausgabe:

Hier ist noch ein JSFiddle, mit dem das ganze in Live gesehen, nachvollzogen und ausprobiert werden kann:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.