Ausführliche Erklärung des Dialogelements in HTML5 (Codebeispiel)

Dieser Artikel enthält eine detaillierte Erklärung (Codebeispiel) des Dialogelements in HTML5. Ich hoffe, dass er für Freunde hilfreich ist.

Dialogfeld (auch bekannt als modales Feld, schwebende Ebene) ist ein wichtiger Teil der Benutzerinteraktion in Webprojekten. Das häufigste, das wir sehen, ist alert()，confirm() in js, aber dieses Dialogfeld ist nicht schön und Benutzerdefinierte Stile können nicht verwendet werden, daher bauen Sie während des Entwicklungsprozesses in der Regel Räder nach Ihren eigenen Bedürfnissen oder verwenden solche von Drittanbietern.

Zusammensetzung von Dialogfeldern

Gemeinsame Popup-Boxformen:

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

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

Das in der Entwicklung befindliche Dialogformular ist eine zufällige Kombination von Positionen und Größe.

Aber es gibt 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). horizontales und vertikales Zentrierungslayout

oben Das Dialogfeld enthält den Inhaltscontainer, und unter dem Dialogfeld befindet sich auch eine Maskenebene (Maske). Die Maskenebene ist eine Trennebene zwischen dem Dialogfeld und dem Seitenkörper Wird gebildet, nachdem der Benutzer das Popup-Fenster ausgelöst hat. Seine Existenz kann für Benutzer einen offensichtlicheren visuellen Unterschied ergeben und verhindert außerdem, dass Benutzer nach dem Auslösen des Dialogfelds andere unnötige Seitenhauptvorgänge ausführen müssen, wodurch eine bessere Benutzererfahrung erzielt wird.

Probleme

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)

• Verfügbarkeit (API Einfach oder nicht, hängt es von anderen ab). Bibliotheken von Drittanbietern)

• Erweiterbarkeit

• Browserkompatibilitätsunterstützung

Gibt es also eine Einfache Möglichkeit, ein Dialogfeld zu erstellen? Natürlich können wir das dialog-Element von HTML5 verwenden.

HTML5(Dialog)

a144f22e2a850e633abba38330027819
    c1a436a314ed609750bd7c7d319db4da Hello world.2e9b454fa8428549ca2e64dfac4625cd
e949bf554aab987df819ed6441bc3609

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

Es ist auch einfach, das Anzeigen/Ausblenden des Dialogfelds zu steuern. Das Hinzufügen des Attributs open bedeutet, es anzuzeigen, und das Entfernen bedeutet, dass es ausgeblendet wird. Natürlich können wir das Anzeigen und Ausblenden (show(), close()) von dialog auch über die DOM-Schnittstelle steuern. Die Maskenebene unter dem Dialogfeld

kann verwendet werden ::backgrop-Pseudoelement, und zur Aktivierung müssen wir die showModal()-DOM-API verwenden. Das Merkmal von ::backgrop ist, dass seine Position unter dem Dialog und über jedem z-index liegt.

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

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

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

Zusätzlich zu unseren üblichen Popup-Ebenen mit Eingabeaufforderungsinformationen gibt es auch ein Typ mit der Popup-Ebene des Formulars.

Popup-Ebene mit Formular

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 nur das Attribut method="dialog" zum Dialogelement hinzufügen, damit der Wert des Attributs value des Schaltflächenelements an das Dialogelement übergeben werden kann.

a38fd2622755924ad24c0fc5f0b4d412
  9a80b60279a1fc3cc29b87aae5a888b1
    e388a4556c0f65e1904146cc1a846bee确定 or 取消94b3e26ee717c64999d7867364b1b4a3
    1d15c23a371098d0a91cc26c5f5df8f6确定65281c5ac262bf6d81768915a4a77ac0
    73f05620b8d0f192df010cbb16b76d67取消65281c5ac262bf6d81768915a4a77ac0
  f5a47148e367a6035fd7a2faa965022e
e949bf554aab987df819ed6441bc3609

3f1c4e4b6b16bbbd69b2ee476dc4f83a
    var dialog = document.querySelector('dialog')
    dialog.showModal()
    dialog.addEventListener('close', function(event) {
        console.log(dialog.returnValue)
    })
2cacc6d41bbb37262a98f745aa00fbf0

demo

var dialog = document.querySelector('dialog')
dialog.showModal()
dialog.addEventListener('close', function(event) {
  alert(dialog.returnValue)
})

<dialog>
  <form method="dialog">
    <p>确定 or 取消</p>
    <button type="submit" value="yes">确定</button>
    <button type="submit" value="no">取消</button>
  </form></dialog>

dialog::backdrop {  background: rgba(0, 0, 0, 0.6)
}

Browserkompatibilität

Obwohl es sich um ein relativ einfach zu verwendendes HTML5 handelt, gibt es dennoch Kompatibilitätsprobleme ist eine experimentelle Funktion in Firefox, aber IE, Edge und Safari unterstützen sie nicht gut. Sie wird nur von Android 6 und höher unterstützt. Weitere Informationen finden Sie unter caniuse

Können also ältere Versionen von Browsern 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 detaillierte Inhalt vonAusführliche Erklärung des Dialogelements in HTML5 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!