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.
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.
<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.
