Veröffentlicht in Web.

Modale Dialogfenster

Dimitra Larou | 05.2025.

Co-Autor(en): Maja Beck, Selina Blum

Möchtest du lernen, wie man zwischen Benutzer und Webseite kommuniziert? Dann bist du in unserem Tutorial genau richtig! Wir zeigen dir die Vielseitigkeit modaler Dialogfenster – Elemente, die andere Aktionen auf der Seite blockieren und so die volle Aufmerksamkeit der Nutzer auf sich ziehen.

Einfacher Dialog

Für unseren einfachen Dialog halten wir zunächst Folgendes fest:
Die Grundstruktur eines HTML-Codes einer Webseite wird übernommen, und die Sprache Deutsch ausgewählt. Im Head werden Zeichensatz, Titel und Einstellungen zum Responsive Design vermerkt.

Nun widmen wir uns dem auf der Webseite tatsächlich sichtbaren Teil des Codes. Das HTML5-Element <dialog id="dialog"> definiert unser Dialogfenster und kann durch seine Kennung (ID) später über JavaScript angesprochen werden. In den Dialog integrieren wir eine kleine Nachricht mit einem einfachen Absatz-Element <p>. Zum Schließen kann entweder ein OK-Button oder ein Kreuz in der Fensterecke genutzt werden. Beide Codebestandteile sind mit einer .close()-Methode versehen und lösen somit das Beenden der Aktion aus.

<dialog id="dialog">
    <span class="close" onclick="dialog.close()">×</span>
    <p>Hi,Ich bin ein Dialog.</p>
    <button onclick="dialog.close()">OK</button>
</dialog>

Das modale Fenster ist jetzt programmiert, allerdings noch nicht auf der Webseite sichtbar. Denn Dialoge müssen erst einmal getriggert werden. Dafür bauen wir einen separaten Button ein, der die Methode .showModal() aufruft, damit unser modales Fenster anzeigt und den restlichen Inhalt der Webseite blockiert.

<button onclick="dialog.showModal()">Dialog anzeigen</button>

Mit diesen wenigen Schritten haben wir bereits ein einfaches modales Dialogfenster erstellt und sind bereit, den Schwierigkeitsgrad zu erhöhen.

Den gesamten Code findet ihr hier: Dialog

Zip Datei: dialog (1).zip

Varianten

Unauffällig verbaut, aber dennoch essenziell für ein modales Dialogfenster, ist JavaScript, das im einfachen Dialog bereits im HTML-Code eingebaut ist. Komplexere Codes könnten mit dieser Methode unübersichtlich werden und sollten deswegen in ihren Programmiersprachen klar getrennt werden. Da wir im weiteren Verlauf des Tutorials solche komplexen Codes behandeln und auch die Gestaltung miteinbeziehen wollen, muss zwischen Struktur (HTML), Design (CSS) und Verhalten (JavaScript) unterschieden werden.

Inhaltliche Varianten

Im ersten Teil des Tutorials diente das modale Element zur Übermittlung einer einfachen Nachricht. Dieser Abschnitt thematisiert zwei weitere Möglichkeiten, wie Inhalte in Dialoge eingebettet werden können.

1. Eingabefenster

HTML
Zuerst übernehmen wir den Head des einfachen Dialogs, verlinken jedoch zusätzlich eine CSS-Datei. Auch hier startet der Body mit dem Dialog-Element <dialog id="dialog">. Anschließend fügen wir ein Formular in das modale Fenster ein, das eine Methode zum Beenden der Aktion durch die Eingabetaste enthält. Ein Titel bzw. eine Aufforderung für den Nutzer und das Kreuz <button type="button" class="close-dialog">×</button> zum Schließen des Fensters bilden den Kopf des Dialogs. Anschließend programmieren wir das Eingabefeld:

<input type="text" id="age-input" placeholder="Bitte eingeben ..."
required />

In dieser Zeile legen wir fest, dass ein Text eingegeben werden kann. Dieser bekommt die Kennung age-input, das leere Feld wird mit einem Platzhalter gefüllt, und die Eingabe ist required – sprich: sie muss getätigt werden.

In einem weiteren Absatz legen wir ein Element an, das die Eingabe bestätigt und zurück zur ursprünglichen Webseite führt. Hier erstellen wir einen Button, der den Dialog triggert, und geben mit <output></output> das Ergebnis der Aktion aus. Zum Schluss verlinken wir eine JavaScript-Datei, die das Verhalten der HTML-Elemente bestimmt.

JavaScript

Durch document.addEventListener('DOMContentLoaded', function () zu Beginn des JavaScript-Codes sorgen wir dafür, dass Funktionen erst ausgeführt werden, wenn die gesamte HTML-Seite geladen ist. Anschließend speichern wir jedes der besagten HTML-Elemente nacheinander in einer eigenen Variable. Dadurch erreichen wir einen effizienten und lesbaren Code. Im Anschluss weisen wir den Variablen bestimmte Verhaltensweisen zu. Mit showBtn.addEventListener("click", () => {dialog.showModal(); });wird festgelegt, dass der Benutzer mit einem Klick auf den Button showBtn (in HTML »show-dialog«) das Dialogfenster mithilfe der Methode .showModal() öffnet.

Als Nächstes kümmern wir uns um die Aufgabe des Bestätigungsbuttons. Mit jsCloseBtn.addEventListener("click", (e) => { e.preventDefault();verhindern wir die Standardaktion des Formulars. Für das Einlesen und Speichern des Inputs sowie das Schließen des modalen Fensters ist folgender Teil zuständig:

const ageGroup = ageInput.value;
dialog.close();

Um eine korrekte Ausgabe zu generieren und die Variable für den Input zu leeren, integrieren wir:

output.textContent = ageGroup
? `Alter "${ageGroup}" bestätigt`
: "Keine Altersgruppe ausgewählt”;
ageInput.value = “";

Zum Schluss wird das Schließen-Kreuz bearbeitet. Es enthält eine Methode zum Beenden der Aktion und gibt automatisch die Information weiter, dass keine Eingabe getroffen wurde. Auch hier wird der Input geleert.

CSS
Im CSS gestalten wir Basislayout, Dialogfenster, Dialogkopf, Input, Buttons und Ausgabe mit gewohnten Mitteln.

Den gesamten Code findet ihr hier: Textfeld

Zip Datei: textfeld.zip

2. Auswahlfenster

Auswahlfenster und Eingabefenster sind in ihren Codes nahezu deckungsgleich. Beide enthalten gleiche Elemente mit gleichem Aussehen und Verhalten. Daher betrachten wir in diesem Teil des Tutorials ausschließlich die Ausschnitte, die Variante 1 und 2 voneinander unterscheiden.

HTML
Anstelle des Eingabefelds programmieren wir ein Dropdown-Auswahlfeld mit <select id="ageSelect" required> und stellen klar, dass die Auswahl notwendig ist. Nun fügen wir unsere erste Option ein:

<option value="" disabled selected hidden>Bitte
auswählen...</option>

Dies ist streng genommen keine echte Option, da sie als eine Art Platzhalter keinen Wert besitzt und somit auch keine gültige Eingabe ist. Mit disabled stellen wir sicher, dass diese Option nicht ausgewählt werden kann. Das Attribut selected bewirkt die standardmäßige Anzeige dieser Option, solange der Nutzer keine andere gewählt hat. Durch hidden kann die Option verschwinden, sobald das Dropdown geöffnet wird. Die tatsächlich in der Liste erscheinenden Optionen notieren wir ganz einfach untereinander zwischen <option></option> im Code.

JavaScript
Hier müssen nur ein paar kleine Änderungen vorgenommen werden. Das showBtn am Anfang des Codes wird durch form ersetzt. Für jedes ageGroup verwenden wir nun selected, und ageInput wird zu ageSelect.

CSS
Im CSS gestalten wir Basislayout, Dialogfenster, Dialogkopf, Select-Elemente, Buttons und Ausgabe mit gewohnten Mitteln.

Den gesamten Code findet ihr hier: Auswahl

Zip Datei: auswahl.zip

Gestalterische Varianten

Jetzt haben wir die Grundlagen zu modalen Dialogfenstern und inhaltliche Varianten besprochen. Im letzten Teil des Tutorials wollen wir uns mit stilistischen Möglichkeiten befassen.

1. Einblendungen

HTML
Für die HTML-Datei des eingeblendeten Dialogs übernehmen wir die der vorherigen zwei Beispiele. Ein modales Fenster, ein »Dialog anzeigen«-Button und ein Schließen-Kreuz fügen wir nach bekanntem Prinzip ein. Der Inhalt des Dialogs ist in diesem Fall irrelevant.

JavaScript
Auch hier holen wir die HTML-Elemente aus dem DOM und ordnen ihnen Variablen zu. Der Anzeigen-Button führt folgenden Codeblock aus:

dialog.show();
void dialog.offsetWidth; dialog.classList.add('open');

In der ersten Zeile wird die bekannte Methode .show() eingesetzt. Sie ist technisch notwendig, enthält allerdings keine von uns gewünschte Animation. Um dennoch das gewünschte Ergebnis zu erreichen, setzen wir in Zeile 2 einen kleinen Trick ein: Der sogenannte »Reflow« zwingt den Browser, das gesamte Layout neu zu berechnen. Hier kommt Zeile 3 ins Spiel, in der eine CSS-Klasse definiert und die Transition ausgelöst wird.

Zum Schließen des Fensters entfernen wir die eben definierte Klasse und kehren die Animation somit um. Daraufhin schließen wir den Dialog mit einer kleinen Wartezeit – passend zur Animationsdauer:

dialog.classList.remove('open'); setTimeout(() => {
dialog.close(); }, 300);

CSS

Im CSS gestalten wir Basislayout, Dialogfenster und Buttons mit gewohnten Mitteln. Wichtige Parts für die Transition schauen wir uns nochmal genauer an. Der Dialog ist zunächst außerhalb des Bildschirms positioniert.

bottom: -200px;

Befindet sich der Dialog im aktiven Zustand – sprich: wurde die Klasse in JavaScript hinzugefügt –, ändert sich der Wert von bottom auf 0.

Diese Änderung wird animiert, wenn wir im CSS des Dialogs ein Attribut transition anlegen und folgende Eigenschaften zuordnen.

transition: bottom 0.3s ease-out;

Den gesamten Code findet ihr hier: Einblendung des Dialogs am unterem Rand

Zip Datei: einblendung-des-dialogs-am-unterem-rand (1).zip

2. Blur-Effekt

HTML

Der Code bleibt auch in diesem Beispiel weitgehend unverändert. Im Anzeigen-Button <button class="blur-btn" data-blur="10">Dialog anzeigen</button>

wird neben der ID und dem Text nun auch die Stärke des Blur-Effekts bestimmt. Man nennt dies auch einen dynamisch generierten Inline-Style.

Achtung: Nicht der Button an sich bekommt diesen Blur-Effekt!

JavaScript

In JavaScript betrachten wir den Anzeige-Button noch einmal genauer:

blurValue = this.getAttribute('data-blur');

Diese Zeile bewirkt, dass der Blur-Wert, der im HTML festgeschrieben steht, ausgelesen wird. Dieser Wert wird unter anderem in der nächsten Zeile weiterverarbeitet:

dialog.style.backdropFilter = `blur(${blurValue}px)`;

Hier befinden sich viele wichtige Elemente. Mit .style greifen wir auf die Inline-Styles des Dialogs zu. Diese greifen zur Laufzeit des Dialogs per JavaScript. Der Blur an sich entsteht durch einen backdropFilter: blur(...). Im Template-String blur(${blurValue}px)wird der Wert über eine Variable eingesetzt.

CSS

Im CSS gestalten wir Basislayout, Dialogfenster und Buttons mit gewohnten Mitteln. Ein paar Kleinigkeiten sollten für einen gelungenen Blur-Effekt jedoch beachtet werden.

Im Hintergrund skalieren wir ein Bild groß, um den Effekt deutlich erkennbar zu machen. Zusätzlich setzen wir den backdrop-filter: blur(...) im Dialog auf den Startwert 0.