Dialoge und Modals sind integrale Bestandteile der meisten Webanwendungen. Sie von Hand zu erstellen ist zwar keine komplexe Aufgabe, wird aber für jeden Webentwickler schnell mühsam. Die übliche Alternative zum manuellen Erstellen besteht darin, eine Komponente zu verwenden, die von jemand anderem erstellt wurde.

Es gibt jedoch ein paar Probleme mit diesem Ansatz. Es gibt so viele Optionen, dass es schwierig wird zu wissen, welche Komponente am besten zu verwenden ist, und Das Anpassen des Erscheinungsbilds solcher Komponenten kann manchmal genauso mühsam sein wie das Erstellen eines Dialogs von Hand. Glücklicherweise gibt es eine weitere Alternative: das HTML-Dialogelement.

Was ist das Dialogelement?

Das HTML-Dialogelement ist ein integriertes HTML-Tag (wie div oder span), mit dem Entwickler benutzerdefinierte Dialoge und Modale erstellen können. Das Dialogelement gibt es seit 2014 in Chrome und Opera, wurde aber erst kürzlich von allen gängigen Browsern unterstützt.

Warum das Dialogelement verwenden?

instagram viewer

Der Hauptgrund für die Verwendung des Dialogelements ist die Bequemlichkeit. Es macht es einfach, Dialoge zu erstellen, die entweder inline oder als Modale erscheinen können, mit nichts mehr als einem einzigen HTML-Tag und ein paar Zeilen JavaScript.

Das dialog-Element beseitigt die Notwendigkeit, ein benutzerdefiniertes Dialogfeld zu erstellen und zu debuggen oder die Komponente eines anderen zu importieren. Es ist auch sehr einfach mit CSS zu stylen.

Browser-Unterstützung für das Dialog-Element

Leider könnte die Browserunterstützung für das Dialogelement besser sein. Es wird in den neuesten Versionen aller gängigen Browser ab März 2022 mit einigen Einschränkungen unterstützt.

Jeder Firefox-Browser, der älter als Firefox 98 ist, unterstützt es nur, wenn es manuell in den Browsereinstellungen aktiviert ist, und jede Safari-Version vor Safari 15.4 unterstützt es überhaupt nicht. Vollständige Details zur Browserunterstützung finden Sie unter kann ich benutzen.

Glücklicherweise bedeutet dies nicht, dass das Dialogelement unbrauchbar ist. Das Google Chrome-Team verwaltet ein Polyfill, das Sie finden können GitHub für das Dialogelement, das es auch in Browsern unterstützt, in denen es nicht nativ unterstützt wird.

In seiner aktuellen Form kann das Dialogelement Barrierefreiheitsprobleme haben, daher ist es möglicherweise besser geeignet, eine benutzerdefinierte Dialogkomponente wie z a11y-dialog in Produktionsanwendungen.

So verwenden Sie das Dialogelement

Um zu demonstrieren, wie das Dialogelement verwendet wird, verwenden Sie es, um eine allgemeine Websitefunktion zu erstellen: ein Bestätigungsmodal für eine Löschschaltfläche.

Alles, was zum Nachmachen benötigt wird, ist eine einzige HTML-Datei.

1. Richten Sie die HTML-Datei ein

Beginnen Sie damit, die besagte Datei zu erstellen und sie index.html zu benennen.

Legen Sie als Nächstes die Struktur der HTML-Datei fest und geben Sie einige grundlegende Metainformationen über die Seite an, damit sie auf allen Geräten richtig dargestellt wird.

Geben Sie den folgenden Code in index.html ein:

<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="UTF-8">
<meta http-equiv="X-UA-kompatibel" Inhalt="IE=Rand">
<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1.0">
<Titel>Dialog-Demo</title>
</head>
<Stil></style>


<Karosserie></body>
<Skript></script>
</html>

Das ist alles, was für dieses Projekt erforderlich ist.

2. Schreiben des Markups

Schreiben Sie als Nächstes das Markup für die Schaltfläche „Löschen“ sowie das Dialogelement.

Geben Sie den folgenden Code in das Body-Tag von index.html ein:

<div-Klasse="Knopfbehälter">
<Taste>
Löschen Artikel
</button>
</div>
<Dialog>
<div>
 Bist du sicher, dass du willst löschenDies Artikel?
</div>
<div>
<Schaltfläche Klasse="nah dran">
 Ja
</button>
<Schaltfläche Klasse="nah dran">
 Nein
</button>
</div>
</dialog>

Der obige HTML-Code erstellt Folgendes:

  • Eine Löschtaste.
  • Das Dialogelement.
  • Zwei Schaltflächen innerhalb des Dialogs.

Wenn index.html in Ihrem Browser geöffnet ist, ist das einzige auf dem Bildschirm sichtbare Element die Schaltfläche zum Löschen. Das bedeutet nicht, dass etwas falsch ist, das Dialogelement benötigt lediglich ein wenig JavaScript, um sichtbar zu werden.

3. Hinzufügen von JavaScript

Schreiben Sie nun den Code, der das Dialogfeld öffnet, wenn ein Benutzer auf die Schaltfläche „Löschen“ klickt, sowie den Code, mit dem das Dialogfeld geschlossen werden kann.

Geben Sie Folgendes in das script-Tag von index.html ein:

konst modal = dokumentieren.querySelector("dialog")
document.querySelector(".button-Container-Schaltfläche").addEventListener("klicken", () => {
modal.showModal();
});
konst closeBtns = dokumentieren.getElementsByClassName("Schließen");
für (btn of closeBtns) {
 btn.addEventListener("klicken", () => {
modal.nah dran();
 })
}

Dieser Code verwendet die querySelector-Methode um Verweise auf die Schaltflächen und den Dialog zu erhalten. Anschließend wird jeder Schaltfläche ein Click-Ereignis-Listener hinzugefügt.

Vielleicht kennen Sie sich aus Ereignis-Listener in JavaScript, die Sie selbst verwenden können. Der an die Schaltfläche „Löschen“ angehängte Ereignis-Listener ruft die Methode showModal() auf, um das Dialogfeld anzuzeigen, wenn auf die Schaltfläche geklickt wird.

Jeder Schaltfläche innerhalb des Modals ist ein Ereignis-Listener zugeordnet, der die Methode close() verwendet, um den Dialog auszublenden, wenn darauf geklickt wird.

Auch wenn es kein JavaScript gibt, das die Methode close() im Code aufruft, können Benutzer das Modal auch schließen, indem sie die Escape-Taste auf ihrer Tastatur drücken.

Nachdem dieses JavaScript vorhanden ist, wird das Modal geöffnet, wenn ein Benutzer auf die Schaltfläche „Löschen“ klickt, und durch Klicken auf die Schaltfläche „Ja“ oder „Nein“ wird das Modal geschlossen.

So sollte das geöffnete Modal aussehen:

Bemerkenswert ist, dass das Dialogelement bereits mit einem gewissen Styling ausgestattet ist, obwohl index.html kein CSS enthält. Das Modal ist bereits zentriert, es hat einen Rahmen, die Breite ist auf den Inhalt beschränkt und es hat eine Standardfüllung.

Benutzer können mit nichts im Hintergrund interagieren (klicken, auswählen), während das Modal geöffnet ist.

Das Dialogelement kann sich statt als Modal auch als Teil des Seitenflusses anzeigen. Um es auszuprobieren, ändern Sie den ersten Ereignis-Listener im JavaScript wie folgt:

document.querySelector(".button-Container-Schaltfläche").addEventListener("klicken", () => {modal.show(); });

Das einzige, was sich in diesem Code geändert hat, ist, dass der Code die Methode show() anstelle der Methode showModal() aufruft. Wenn ein Benutzer nun auf die Schaltfläche „Element löschen“ klickt, sollte das Modal wie folgt inline geöffnet werden:

4. Styling hinzufügen

Passen Sie als Nächstes das Aussehen des Dialogfelds und seines Hintergrunds an, indem Sie CSS schreiben.

Das CSS reduziert den Rand des Dialogfelds, begrenzt seine maximale Breite und verdunkelt dann den Hintergrund und fügt den Schaltflächen ein wenig Stil hinzu.

Das Gestalten des Dialogs selbst ist einfach, aber die Pseudo-Klasse „background“ ist notwendig, um ein Styling hinzuzufügen, das auf den Hintergrund des Dialogs abzielt.

Fügen Sie den folgenden Code in das style-Tag von index.html ein:

dialog:: hintergrund {
 Hintergrund: schwarz;
Opazität: 0.5;
}
Taste {
 Randradius: 2px;
 Hintergrundfarbe: weiß;
 Rand: 1px durchgehend schwarz;
 Rand: 5px;
 Box-Schatten: 1px 1px 2px grau;
}
Dialog {
 maximale Breite: 90vw;
 Rand: 1px durchgehend schwarz;
}

Wenn der Dialog geöffnet ist, sollte er nun so aussehen:

Und Sie haben einen voll funktionsfähigen Dialog aufgebaut.

Das Dialogelement ist eine großartige Möglichkeit, Modale zu erstellen

Mit dem HTML-Dialogelement, das kürzlich in allen gängigen Browsern unterstützt wird, können Webentwickler jetzt voll funktionsfähige, leicht anpassbare Modale und Dialoge mit einem HTML-Tag und ein paar Zeilen JavaScript und ohne sich auf einen Drittanbieter verlassen zu müssen Lösung.

Das Dialogelement verfügt über eine vom Google Chrome-Team verwaltete Polyfill, die es Entwicklern ermöglicht, den Dialog in Browserversionen zu verwenden, die ihn nicht unterstützen.