HTML details und dialog – interaktive Elemente
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>
Der Benutzer kann zwar noch scrollen, aber nicht mehr mit anderen interaktiven Elementen interagieren.
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 mitbewegt, wenn die Seite gescrollt wird, und andere interaktive Elemente behalten ihre Funktion.
