Eine kurze Diskussion zum Ausprobieren des Dialogelements in HTML5

Dialogfelder (auch als modale Felder und schwebende Ebenen bezeichnet) sind ein wichtiger Bestandteil der Benutzerinteraktion in Webprojekten. Die am häufigsten verwendeten sind jedoch Alert() undConfirm() in js. Dieses Dialogfeld ist jedoch nicht schön und kann es auch nicht Der Stil kann individuell angepasst werden, sodass wir während des Entwicklungsprozesses in der Regel Räder nach unseren eigenen Bedürfnissen bauen oder auf solche von Drittanbietern zurückgreifen.

Gängige Formen von Popup-Boxen:

Position: Obere linke Ecke des Bildschirms, obere rechte Ecke, untere linke Ecke, untere rechte Ecke, vertikale Mitte usw.

Größe: feste Breite und feste Höhe, feste Breite und feste Höhe, variable Breite und feste Höhe usw.

Bei der in der Entwicklung befindlichen Dialogform handelt es sich um eine zufällige Kombination von Position und Größe.

Es gibt jedoch eine Situation (vertikale Zentrierung mit variabler Breite und Höhe), die nicht einfach zu implementieren ist (Sie können display:table oder CSS3s Translate oder Flex verwenden, um dies zu erreichen. Weitere Informationen finden Sie im horizontalen und vertikalen Zentrierungslayout). .

Das obige Dialogfeld enthält einen Container für Inhalte. Unterhalb des Dialogfelds befindet sich außerdem eine Maskenebene (Maske). Die Maskenebene ist eine Trennebene zwischen dem Dialogfeld und dem Seitenkörper, die gebildet wird, nachdem der Benutzer das Popup-Feld ausgelöst hat Seine Existenz kann Benutzern einen offensichtlicheren visuellen Unterschiedseffekt verleihen und gleichzeitig andere unnötige Seitenhauptvorgänge vermeiden, nachdem Benutzer das Dialogfeld ausgelöst haben, wodurch eine bessere Benutzererfahrung erzielt wird.

Obwohl uns viele Dialogräder zur Auswahl stehen, stehen wir vor verschiedenen Problemen.

• Welches Dialogfeld soll ausgewählt werden (ein Problem für Menschen mit Entscheidungssyndrom)
• Benutzerfreundlichkeit (ob die API einfach ist oder nicht, ob sie auf anderen Bibliotheken von Drittanbietern basiert)
• Skalierbarkeit
• Unterstützung der Browserkompatibilität

Gibt es eine einfache Möglichkeit, ein Dialogfeld zu erstellen? Natürlich können wir das HTML5-Dialogelement verwenden.

HTML5 (Dialog)

 <dialog open> <h2>Hallo Welt.</h2></dialog>

Es ist ganz einfach. Wir können den obigen Code verwenden, um ein Dialogfeld mit dem Inhalt „Hallo Welt“ zu erstellen.

Es ist auch einfach, das Anzeigen/Ausblenden des Dialogfelds zu steuern. Fügen Sie das Attribut „Öffnen“ hinzu, um es anzuzeigen, und entfernen Sie es, um es auszublenden. Natürlich können wir das Ein- und Ausblenden des Dialogs auch über die DOM-Schnittstelle steuern (show(), close())

Für die Maskenebene unter dem Dialogfeld können wir das Pseudoelement ::backgrop verwenden. Um es zu aktivieren, müssen wir die DOM-API showModal() verwenden. Das Merkmal von ::backgrop ist, dass seine Position unter dem Dialogfeld liegt , in jedem Z-Index oben.

Mit showModal() kann nicht nur die Maskenebene, sondern auch der Dialogcontainer angezeigt werden. Wenn Sie also ::backdrop verwenden, können Sie showModal() anstelle der show()-API verwenden, wenn Sie die ESC-Taste auf der Tastatur drücken Die Popup-Ebene wird natürlich geschlossen. Sie können die DOM-API close() verwenden.

Wir können die ::backdrop-Ebene als halbtransparente Ebene festlegen. Der Code lautet wie folgt:

 dialog::backdrop { Hintergrundfarbe: rgba(0, 0, 0, 0.75);}

Zusätzlich zu unseren üblichen Popup-Ebenen mit Eingabeaufforderungsinformationen gibt es auch eine Popup-Ebene mit einem Formular, das häufiger verwendet wird.

Können wir das HTML5-Dialogelement in Kombination mit dem Formularelement verwenden, um diese Popup-Ebenen zu erstellen?

Antwort: Ja

Wie können wir das Formularelement und das Dialogelement eng kombinieren?

Antwort: Wir müssen dem Dialogelement nur das Attribut method=dialog hinzufügen, damit der Wert des Attributwerts des Schaltflächenelements an das Dialogelement übergeben werden kann.

 <dialog> <form method=dialog> <p>Bestätigen oder Abbrechen</p> <button type=submit value=yes>Bestätigen</button> <button type=submit value=no>Abbrechen</button> </form ></dialog><script> var dialog = document.querySelector('dialog') dialog.showModal() dialog.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>

Demo

Obwohl es sich um ein relativ einfach zu verwendendes HTML5 handelt, gibt es immer noch Kompatibilitätsprobleme. Es handelt sich um eine experimentelle Funktion in Firefox, aber IE, Edge und Safari unterstützen es nicht gut es, und Android unterstützt es auch nicht gut genug und wird nur von Android 6 und höher unterstützt. Einzelheiten hierzu finden Sie bei caniuse

Können also ältere Browserversionen HTML5-Dialoge unterstützen? Zunächst einmal überlegen wir, ob es ein Polyfill gibt, das den Dialog unterstützt, genau wie babel-polyfill, das die neuen Funktionen von es6 unterstützt. Es gibt tatsächlich ein solches Open-Source-Projekt a11y-dialog, das verschiedene Versionen von Vue und bereitstellt jeweils reagieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.