Popups werden h?ufig verwendet, um einfache Benachrichtigungen anzuzeigen, wie z. B. Cookie-Meldungen, verschwindende Toast-Benachrichtigungen, Tooltips oder Kontextmenüelemente, die mit der rechten Maustaste angeklickt werden.

Modale Fenster helfen Benutzern, sich auf bestimmte Aufgaben zu konzentrieren, z. B. Benachrichtigungen und Warnungen, die eine Benutzerbest?tigung erfordern, komplexe interaktive Formulare und Leuchtk?sten für Bilder oder Videos.

Popups verhindern nicht die Interaktion mit der Seite, w?hrend modale Fenster das Dokument überlagern, den Hintergrund abdunkeln und andere Aktionen blockieren. Dieses Verhalten funktioniert ohne zus?tzliche Stile oder Skripte; Der einzige Unterschied besteht in der Methode zum ?ffnen des Dialogs.

Methoden zum ?ffnen von Dialogfenstern

– Popup:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

– modales Fenster:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

In beiden F?llen ist das ?ffnen des Tag setzt sein open-Attribut auf true. Wenn Sie es direkt festlegen, wird das Dialogfeld als Popup und nicht als modales Fenster ge?ffnet. Zum Rendern modaler Fenster müssen Sie die entsprechende Methode verwenden. Zum Erstellen eines zun?chst ge?ffneten Popups ist kein JavaScript erforderlich.

<dialog open>Hi, I'm a popup!</dialog>

Probieren Sie es aus:

• ?ffnen eines Popups mit der .show()-Methode: https://codepen.io/alexgriss/pen/zYeMKJE
• ?ffnen eines modalen Fensters mit der Methode .showModal(): https://codepen.io/alexgriss/pen/jOdQMeq
• Direktes ?ndern des offenen Attributs: https://codepen.io/alexgriss/pen/wvNQzRB

Ans?tze zum Schlie?en des Dialogfensters

Dialogfenster schlie?en auf die gleiche Weise, unabh?ngig davon, wie sie ge?ffnet wurden. Hier sind einige M?glichkeiten, ein Popup- oder modales Fenster zu schlie?en:

– mit der .close()-Methode:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

– durch Ausl?sen des Submit-Ereignisses in einem Formular mit dem Attribut method="dialog":

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

– durch Drücken der Esc-Taste:

Das Schlie?en mit Esc funktioniert nur für modale Fenster. Es l?st zuerst das Abbruchereignis aus und schlie?t es dann, sodass Benutzer problemlos vor nicht gespeicherten ?nderungen in Formularen gewarnt werden k?nnen.

Probieren Sie es aus:

• Schlie?en eines Dialogfelds mit der Close-Methode: https://codepen.io/alexgriss/pen/GRzwjaV
• Schlie?en eines Dialogfelds über das Absendeformular: https://codepen.io/alexgriss/pen/jOdQVNV
• Schlie?en eines modalen Fensters mit der Esc-Taste: https://codepen.io/alexgriss/pen/KKJrNKW
• Verhindern, dass ein modales Fenster mit Esc geschlossen wird: https://codepen.io/alexgriss/pen/mdvQObN

Rückgabewert beim Schlie?en

Wenn Sie einen Dialog mit einem Formular schlie?en, das das Attribut method="dialog" verwendet, k?nnen Sie den Wert der Schaltfl?che ?Senden“ erfassen. Dies ist nützlich, wenn Sie basierend auf der angeklickten Schaltfl?che unterschiedliche Aktionen ausl?sen m?chten. Der Wert wird in der Eigenschaft returnValue gespeichert.

Probieren Sie es aus: https://codepen.io/alexgriss/pen/ZEwmBKx

Ein genauerer Blick darauf, wie es funktioniert

Lassen Sie uns tiefer in die Mechanik des Dialogfensters und die Details seiner Browser-Implementierung eintauchen.

Die Mechanik eines Popups

?ffnen eines als Popup mit .show() oder dem open-Attribut positioniert es automatisch mit position: absolute im DOM. Grundlegende CSS-Stile wie R?nder und Rahmen werden auf das Element angewendet, und das erste fokussierbare Element im Fenster erh?lt durch das Autofokus-Attribut automatisch den Fokus. Der Rest der Seite bleibt interaktiv.

Die Mechanik eines modalen Fensters

Ein modales Fenster ist komplexer gestaltet und funktioniert komplexer als ein Popup.

Dokumentüberlagerung

Beim ?ffnen eines modalen Fensters mit .showModal() wird der

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>