Popver API VS-Dialog Modal: Gleich, gleich, aber unterschiedlich-js-Tutorial-php.cn

Popver API VS dialog Modal : Same Same but Different

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 schwer fiel, 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

für:

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();

Nach dem Login kopieren

Das

-Element kann, wenn es mit der showModal()-Methode angezeigt wird, mit der Esc-Taste geschlossen werden. 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 Arten von Popups werden als nichtmodale Popups 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 den Zugriff darauf nicht möglich.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

Nach dem Login kopieren

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 Situationen wie:

zu bewältigen

Es gibt keine Funktion zur leichten Entlassung. Durch Klicken außerhalb des Modells wird die .
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.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

Nach dem Login kopieren

Hauptunterschied zwischen Popover und Element

Der Hauptunterschied zwischen dem Popover und

Elemente ist, dass Popover immer nicht modal ist. Der Das Element verfügt über ein Role=Dialog-Attribut. Dieses Rollenattribut ist an verschiedene HTML-Elemente angehängt und verhält sich auf eine bestimmte Weise. d. h. h1 hat eine Überschriftsrolle und a hat eine Anker-/Link-Rolle. Diese Rolle wird verwendet, um unterstützende Technologien wie Bildschirmleseprogramme zu bestimmen und dabei zu helfen, die Elemente zu bestimmen. Das Popover ist jedoch ein Attribut eines HTML-Elements, da ihm keine Standardrolle zugeordnet ist. Dies hilft dem

im obigen Beispiel ausgeblendet, bis auf die Schaltfläche geklickt wird.

Das Popover-Attribut kann mit minimalem Code verwendet werden und obwohl es mit Javascript gesteuert werden kann, ist es nicht immer erforderlich, wie das

Popover kann zwei Eigenschaften haben:
1.popover=auto: Verfügt über eine Funktion zur leichten Entlassung und erfordert keine JS-Interaktion.
2.popover=manual: Erfordert Javascript-Interaktion, z. B. das Klicken auf eine Schaltfläche oder einen Timer, um es explizit zu schließen.

Popover wird immer auf der obersten Ebene angezeigt, es ist nicht erforderlich, den Z-Index explizit festzulegen.

Codebeispiel:

Sie sehen, dass ich das gleiche Verhalten fast ohne Javascript-Code erreichen kann. Das Entwerfen und Verwalten verschiedener Popover ist viel einfacher.

Einige Designüberlegungen

Popover kann Folgendes haben: Mit CSS festgelegter Hintergrund, der verwendet werden kann, um den Hintergrund des Popovers zu verwischen oder auszugrauen, aber dadurch nicht die Lichtausblendungsfunktionalität verliert und der Benutzer trotzdem nach draußen klicken kann, wenn das Popover erscheint. Sie können andere Elemente Ihrer Webseite aufrufen und mit ihnen interagieren. Sie sollten sehr vorsichtig sein, wenn Sie entscheiden, wann Sie Popover anstelle von

wählen.

Hier ist vor allem zu berücksichtigen: Ist die angezeigte Komponente das Einzige, was im Moment den Fokus haben sollte? Kann der Benutzer mit irgendetwas anderem interagieren?

Abschluss

Zusammenfassend lässt sich sagen, dass das Element und die Popover-API vielseitige Möglichkeiten zur Erstellung interaktiver Popups in Ihren Webanwendungen bieten. Indem Sie ihre unterschiedlichen Merkmale und Anwendungsfälle verstehen, können Sie fundierte Entscheidungen treffen, um die Benutzererfahrung zu verbessern und Ihren Entwicklungsprozess zu optimieren.

Referenzen

Vergleich der Popover-API und des Elements
Dialoge und Popovers scheinen ähnlich zu sein. Wie unterscheiden sie sich?
Popover-API landet in Baseline

Das obige ist der detaillierte Inhalt vonPopver API VS-Dialog Modal: Gleich, gleich, aber unterschiedlich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!