Ich habe einige Tech-News-Blogs gelesen und bin auf die Überschrift „Popover API landet in Baseline“ gestoßen. Ich war verwirrt, als ich kürzlich in die Front-End-Entwicklung eintauchte und es mir in letzter Zeit sehr schwerfiel, mich an die Verwendung von Elementen in HTML zu gewöhnen. Beim Durchblättern des Blogs war ich ständig verwirrt darüber, wie ich das Element bisher verwendet habe.

TL;DR

Wählen Sie

• Modale Popups, die den Fokus des Benutzers erfordern
• Barrierefreiheit und Tastaturinteraktion

Popover auswählen für:

• Nichtmodale Popups mit leichter Entlassung
• Einfache Implementierung mit minimalem Code

-Element

Laut MDN Das Dialogelement

Das HTML-Element stellt ein modales oder nichtmodales Dialogfeld oder eine andere interaktive Komponente dar, z. B. eine ausschließbare Warnung, einen Inspektor oder ein Unterfenster.

A wird im Allgemeinen verwendet und über dem Inhalt angezeigt, wenn die Website die Aufmerksamkeit des Benutzers auf etwas Wichtiges lenken muss. d. h. einen Newsletter abonnieren, die Deaktivierung des Adblockers anfordern (eher erzwingen) oder die Allgemeinen Geschäftsbedingungen akzeptieren.

-Element als Modal

Wie Sie möglicherweise schon mehrfach auf mehreren Websites gesehen haben, werden einige dieser Popups auf Ihrem gesamten Bildschirm angezeigt, während der Hintergrund unscharf wird oder der Hintergrund deaktiviert wird und sich der Benutzer nur auf die jeweilige Aufgabe konzentriert. Der Benutzer muss sie entweder schließen (nur wenn erlaubt) das Popup oder geben Sie die erforderlichen Informationen ein, damit es verschwindet. Dieses Verhalten wird als „Element als Modal“ bezeichnet. Diese modalen Elemente werden auf der obersten Ebene der Seite angezeigt.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

-Element kann mit der Esc-Taste geschlossen werden, wenn es mit der showModal()-Methode angezeigt wird. Tastaturbenutzer erwarten ein solches Verhalten, das beibehalten werden muss und vom Browser bereitgestellt wird. Wenn mehrere modale Dialoge geöffnet sind, wird nur der letzte Dialog mit der Esc-Taste geschlossen.

Element als nichtmodal

Möglicherweise möchten Sie nicht immer den natürlichen Nutzungsfluss Ihrer Webseite durch den Benutzer stoppen, alles andere nicht mehr tun und sich auf das konzentrieren, was Sie anzeigen möchten, aber dennoch auf Ihren Inhalt, wie z. B. eine Toast-Benachrichtigung, eine Cookie-Einwilligung oder einen allgemeinen Tooltip Info. sollte auf der obersten Ebene der Seite erscheinen, über allen anderen Inhalten, mit denen der Benutzer interagieren kann oder nicht. Diese Art von Pop-ups werden als nichtmodale Pop-ups bezeichnet. Benutzer können diese manuell oder zeitlich verwerfen und verschwinden dann von selbst. Diese nicht-modalen Dialoge werden immer noch auf der obersten Ebene der Seite angezeigt, aber ihre Priorität kann mithilfe des Z-Index gesteuert werden und das modale Element nimmt einen höheren Z-Index als diesen an und macht diesen nicht zugänglich.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

Codebeispiel

Einige Probleme

Es fiel mir schwer, die Funktionsweise und Verwendung nichtmodaler Elemente zu verstehen. Meiner Meinung nach verhielt sich das nichtmodale Element inkonsistent und benötigte Javascript-Code, um mit Situationen wie:

• Es gibt keine Funktion zur leichten Entlassung. Durch Klicken außerhalb des Modells wird die Datei nicht geschlossen.
• Esc-Taste verwirft das nicht und benötigt Javascript, um dieses Szenario zu bewältigen.
• Sie müssen den Z-Index manuell verwalten, wenn Sie die oberste Ebene zeichnen möchten.

Zu meiner Überraschung hat die Popover-API diese und weitere Probleme beantwortet oder behoben....

Popover-API

popover sind Attribute, die zu jedem HTML-Attribut hinzugefügt werden können. Hier ist ein Beispiel.

Toggle the popover
Popover content

Hauptunterschied zwischen Popover und

-Element

Der Hauptunterschied zwischen den Popover- und