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)

<dialog open>
    <h2> Hello world.</h2>
</dialog>

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.

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

<script>
    var dialog = document.querySelector('dialog')
    dialog.showModal()
    dialog.addEventListener('close', function(event) {
        console.log(dialog.returnValue)
    })
</script>

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!