HTML dialog für Dialogfenster – Pop-ups, Hinweise, Formulare

HTML dialog für modale und nicht modale Dialogfenster wie Pop-ups, Fehlermeldungen, Formulare oder Bestätigungsfelder, dass sich mit etwas JavaScript öffnen und schließen lässt.

HTML dialog

dialog-Tag

Das dialog-Element erzeugt ein modales Dialogfenster für Nachrichten, Warnungen oder für die Interaktion mit dem Benutzer. Ein »modales Fenster« ist ein Popup oder Overlay und wirkt, als wäre das Fenster absolut positioniert. Der nachfolgende Inhalt bleibt an seinem Platz, der Inhalt des dialog-Elements legt sich über die vertikale und horizontale Mitte des Browserfensters und verdrängt nachfolgenden Inhalte nicht.

Das dialog-Element braucht JavaScript,um seine Meldungen auszuspielen und um das modale Fenster wieder zu schließen.

<button id="openBtn">Es gibt neue Nachrichten!</button>
<dialog>
	<p>Das dialog-Element …</p>
	<button id="closeBtn">Schließen</button>
</dialog>

Per Vorgabe zeigen die Browser das Dialog-Element in einem schwarzen Rahmen. Ohne dialog-Unterstützung zeigen die Browser einfach den Inhalt und schieben den folgenden Inhalt nach unten.

Das Skript ist kurz und einfach. JavaScript showModal() öffnet das dialog-Element, close() schließt es.

<script>
const dialog = document.querySelector('dialog');
const open = document.getElementById('openBtn');
const close = document.getElementById('closeBtn');

open.addEventListener('click', () => {
	dialog.showModal();
});

close.addEventListener('click', () => {
	dialog.close();
});
</script>

backdrop – deutlich machen

Der Benutzer kann zwar noch scrollen, aber nicht mehr mit anderen interaktiven Elementen interagieren. Die CSS Pseudo-Klasse backdrop hilft zum besseren Verständnis des Dialog-Fensters. ::backdrop gestaltet das systemseitige Overlay-Hintergrund-Element, das bei Vollbild oder Modalen mit <dialog> erscheint, und legt eine Schleier hinter einem <dialog> oder einem Element im Vollbildmodus.

::backdrop {
	background-color: rgba(0, 0, 0, 0.6);
}

Alternativ zu showModal() würde JavaScript show() das dialog-Element zwar ebenfalls öffnen und bis zu einem Klick auf den Schließen-Button geöffnet halten, aber das dialog-Fenster mitbewegen, wenn die Seite gescrollt wird. Andere interaktive Elemente behalten dann ihre Funktion.

Suchen auf mediaevent.de