Detaillierte Erläuterung der Verwendung von HTML5-Dialogen

1. Vorab geschrieben

Apropos Dialog-Tag: Viele Leute sind damit möglicherweise nicht vertraut. Schließlich wurde dieses Tag vom Chrome-Browser erst mit HTML5 unterstützt. 2-Standard wurde behoben. Ja, was den Zweck dieses Tags betrifft, kann es anhand der Semantik und Konversation klar verstanden werden.

Was uns hier einfällt, sind Alarm-, Bestätigungs- und andere Popup-Fenster. Ja, sie gehören zur gleichen Familie, es sind alles Popup-Fenster. Als nächstes werfen wir einen kurzen Blick auf einige Eigenschaften des Dialog-Tags und Verwendungsszenarien.

2. Verwenden Sie Tags

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

Da es sich um ein Tag handelt, ist es tatsächlich dasselbe wie unser häufig verwendetes p , p und andere Tags unterstützen, wie im obigen Beispielcode gezeigt, intern beliebige andere Elemente.

Hier fällt Ihnen vielleicht auf, dass das open-Attribut im obigen Beispielcode verwendet wird, um die Anzeige und das Ausblenden dieses Popup-Fensters zu steuern. Natürlich können Sie auch CSS verwenden, wie Sie möchten Zur Kontrolle kommt es bei der Verwendung der Zusatzfunktionen einiger Geräte (z. B. Barrierefreiheit, Bildschirmlesesoftware usw.) zu Anomalien. Daher wird empfohlen, die Standardfunktionen zum Anzeigen und Ausblenden zu verwenden.

3. Unterstützte Standardmethoden

Erstens ist das Dialog-Tag ein Beispiel für HTMLDialogElement, das von HTMLElement geerbt wurde, sodass es zur gleichen Kategorie wie das p gehört Der einzige Unterschied zwischen hierarchischen Tags besteht darin, dass sie über mehr Standardfunktionen als p verfügen. In diesem Abschnitt werfen wir einen Blick darauf, welche Standardmethoden uns zur Verfügung stehen.

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

Sie können zuerst zum Beispiel gehen, es bedienen, dann die Funktionen sehen und dann zum Vergleich zurückkommen:

1: Die Close-Methode kann auch im ausgeblendeten Zustand mehrmals aufgerufen und erneut aufgerufen werden.

2: close kann eine Variable übergeben, die eine Zeichenfolge sein und in returnVlaue ausgedrückt werden muss.

3: Die Show-Methode kann auch im versteckten Zustand problemlos mehrfach aufgerufen werden.

4: Die Show-Methode ändert die Position des Toasts nicht. Das Popup-Fenster befindet sich nach dem Aufruf der Show-Methode immer noch an der ursprünglichen Position.

5: Anzeigemethode, die Anzeigeposition liegt direkt hinter dem vorherigen Element, zentriert, es gibt keine Maskenebene dahinter, die Z-Index-Anzeigemethode ähnelt der relativen ohne Z-Index-Einstellung (falls vorhanden). this , wenn showModal nicht aufgerufen wurde).

6: Wenn showModal aufgerufen wurde, wird das Element nach der Show-Methode an der von showModal angezeigten Position angezeigt und ändert sich nicht (auch wenn sich die Inhaltshöhe stark ändert).

7: Wenn zwei Dialogelemente vorhanden sind, rufen beide die Show-Methode auf. In der HTML-Struktur überdeckt der nachfolgende Dialog immer den vorherigen (unabhängig davon, welcher Dialog zuerst die Show-Methode aufruft).

8: Hinter der Anzeige von showModal befindet sich die Anzeigeebene auf der Ebene der Browser-Webansicht Zeigen Sie das Dialogattribut an. Der Dialog befindet sich alle im Vordergrund, was besonders für modale Felder geeignet ist. Nach dem Erscheinen des Popup-Felds wird es definitiv keine hierarchische Verwirrung geben.

9: showModal kann nur einmal aufgerufen werden. Wenn sich der Dialog im Anzeigestatus befindet, wird beim erneuten Aufruf von showModal ein Fehler gemeldet und er kann nicht direkt ausgeführt werden Solange das Open-Attribut vorhanden ist. Wenn Sie es erneut aufrufen, wird ein Fehler gemeldet. Daher ist es besser, das Standard-Open-Attribut zum Ein- und Ausblenden des Dialogs zu verwenden.

10: Wenn es zwei Dialogelemente auf der Seite gibt und beide die Methode showModal aufrufen, ist die Ebene des später aufgerufenen Dialogs unabhängig von ihrer Struktur in HTML höher als die Ebene des zuvor aufgerufenen Dialogs .

11: Der Wert von dialog.returnVlaue ist der beim Aufruf von dialog.close(string) übergebene Wert. Es werden nur Zeichenfolgen unterstützt, die beim Aufruf von dialog.close übergeben werden ist gültig.

12: Wenn beim Schließen kein Wert übergeben wird, ist der Wert von returnVlaue leer. Wenn ein Wert an dialog.close("1") übergeben wird, wird dies nach der nächsten Anzeige von dialog.close() der Fall sein close , returnVlaue ist immer noch gleich „1“.

13: Der Rückgabewert von open ist: true/false.

4. Unterstützte Standardereignisse

Ein weiterer Vorteil von Dialog besteht darin, dass es zusätzlich zu grundlegenden Ereignissen wie Klick zwei zusätzliche Sonderereignisse für Dialogereignisse unterstützt:

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后，好像不管用了。
dialog.oncancel = function(){};

Schauen wir uns nun ein Beispiel an: Beispielanzeige eines Dialogereignisses.

Es gibt auch mehrere Probleme, hier sind einige:

1: Nur durch den Aufruf von dialog.close() zum Ausblenden des Dialogs kann das onclose-Ereignis ausgelöst werden.

2: Nachdem das Abbruchereignis ausgelöst wurde, wird das Schließereignis definitiv weiterhin ausgelöst. Nach der Chrome64-Version wird Abbrechen nicht durch die Esc-Taste ausgelöst.

3: Wenn mehrere Schaltflächen zum Schließen des Dialogs vorhanden sind, übergeben Sie bei jedem Aufruf von close einen anderen Wert. Verwenden Sie im Rückruf des Schließereignisses den Wert von returnVlaue, um zu bestimmen, um welche Schaltfläche es sich handelt. Das zum Auslösen verwendete Shutdown-Ereignis.

5. Andere

Einige der Funktionen des Dialogs wurden bereits früher erläutert. Sie sind möglicherweise unvollständig oder ungenau, oder es können im Laufe der Zeit neue Funktionen hinzukommen.

Beim Betrachten der vorherigen Beispiele haben wir auch einige Mängel festgestellt, wie zum Beispiel: Der Stil ist besonders hässlich. In dieser Hinsicht können wir den Stil vollständig mit CSS zurücksetzen, ohne die Semantik und andere Dinge zu beeinträchtigen Seien Sie versichert, dass Sie umgestalten werden.

Ich möchte nur über die Leistung des Dialogs sprechen, also werde ich das nicht tun.

6. Zusammenfassung

Dialog ist schließlich ein semantischer Tag für Popup-Dialoge und hat einige einzigartige Vorteile (z. B. die Höhe der Webansichtsebene). ), obwohl es nur von Chrome unterstützt wird, ist es dennoch sehr vielversprechend für die zukünftige Verwendung. In anderen Browsern können Sie eine Reihe von Dialogmechanismen selbst implementieren (vielleicht gibt es sie bereits). einen Umsetzungsplan dafür, daher werde ich hier nicht weiter darauf eingehen).

Verwandte Empfehlungen:

html