Explication détaillée de l'élément de dialogue en HTML5 (exemple de code)

Cet article vous apporte une explication détaillée (exemple de code) de l'élément de dialogue en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La boîte de dialogue (également connue sous le nom de boîte modale, couche flottante) est une partie importante de l'interaction utilisateur dans les projets Web. La boîte de dialogue la plus courante que nous voyons est alert()，confirm() en js, mais cette boîte de dialogue n'est pas belle et. Les styles personnalisés ne peuvent pas être utilisés, donc pendant le processus de développement, vous construisez généralement des roues en fonction de vos propres besoins ou utilisez des roues tierces.

Composition des boîtes de dialogue

Formes de boîtes pop-up courantes :

Position : coin supérieur gauche, coin supérieur droit, coin inférieur gauche, coin inférieur droit de l'écran, centrage vertical, etc.

Taille : largeur fixe et hauteur fixe, largeur fixe et hauteur variable, largeur variable et hauteur variable, etc.

Le formulaire de dialogue en cours de développement est une combinaison aléatoire de position et la taille.

Mais il existe une situation (centrage vertical avec largeur et hauteur variables) qui n'est pas facile à mettre en œuvre (vous pouvez utiliser display:table ou traduire ou flex de CSS3 pour y parvenir. Pour plus de détails, veuillez vous référer au ). disposition de centrage horizontal et vertical

ci-dessus La boîte de dialogue contient le conteneur de contenu, et il y a également un calque de masque (masque) sous la boîte de dialogue Le calque de masque est un calque de séparation entre la boîte de dialogue et le corps de la page. formé après que l'utilisateur a déclenché la boîte de dialogue. Son existence peut donner un effet de différence visuelle plus évident pour les utilisateurs, et cela empêche également les utilisateurs d'effectuer d'autres opérations principales inutiles sur la page après le déclenchement de la boîte de dialogue, produisant ainsi une meilleure expérience utilisateur.

Problèmes

Bien qu'il existe de nombreuses roues de dialogue parmi lesquelles choisir, nous sommes confrontés à divers problèmes.

• Quelle boîte de dialogue choisir (un casse-tête pour les personnes atteintes du syndrome du choix)

• Disponibilité (API Simple ou pas, cela dépend-il des autres bibliothèques tierces)

• Extensibilité

• Prise en charge de la compatibilité des navigateurs

Alors, y a-t-il un un moyen simple de créer une boîte de dialogue ? Bien sûr, nous pouvons utiliser l’élément dialog de HTML5.

HTML5(dialog)

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

C'est très simple. Nous pouvons utiliser le code ci-dessus pour créer une boîte de dialogue avec le contenu de la pop-up « Bonjour tout le monde ».

Il est également facile de contrôler l'affichage/masquage de la boîte de dialogue. Ajoutez l'attribut open pour l'afficher, et supprimez-le pour la masquer. Bien sûr, nous pouvons également contrôler l'affichage et le masquage (show(), close()) de dialog via l'interface DOM. Le calque de masque sous la boîte de dialogue

peut être utilisé. ::backgrop pseudo-élément, et pour l'activer, nous devons utiliser l'showModal() API DOM. La caractéristique de ::backgrop est que sa position est sous la boîte de dialogue et au-dessus de tout z-index.

L'utilisation de showModal() peut non seulement afficher le calque de masque, mais également le conteneur de dialogue, donc lorsque vous utilisez ::backdrop, vous pouvez utiliser showModal() au lieu de show() pour cette API si vous appuyez sur le bouton ; La touche ESC du clavier fermera la couche contextuelle, bien sûr, vous pouvez utiliser l'API close() DOM.

Nous pouvons définir ::backdrop ce calque comme calque semi-transparent, le code est le suivant :

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

En plus de nos calques contextuels communs pour des informations rapides, il est également un calque contextuel plus couramment utilisé. Il s'agit d'un calque contextuel avec un formulaire.

Couche contextuelle avec formulaire

Pouvons-nous utiliser l'élément de dialogue HTML5 combiné avec l'élément de formulaire pour créer ces couches contextuelles ?

Réponse : Oui

Comment pouvons-nous combiner étroitement l'élément de formulaire et l'élément de dialogue ?

Réponse : Il suffit d'ajouter l'attribut method="dialog" à l'élément de dialogue, afin que la valeur de l'attribut value de l'élément bouton puisse être transmise à l'élément de dialogue.

<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>

démo

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)
}

Compatibilité des navigateurs

Bien qu'il s'agisse d'un HTML5 relativement facile à utiliser, il existe toujours des problèmes de compatibilité Concernant les problèmes sexuels, Chrome et Opera le prennent mieux en charge. Il s'agit d'une fonctionnalité expérimentale dans Firefox, mais IE, Edge et Safari ne le prennent pas bien en charge. Android ne le prend pas en charge assez bien. après Android 6. Pour plus de détails, veuillez vous référer à caniuse

Alors, les anciennes versions des navigateurs peuvent-elles prendre en charge la boîte de dialogue HTML5 ? Tout d'abord, nous nous demandons s'il existe un polyfill prenant en charge le dialogue, tout comme babel-polyfill qui prend en charge les nouvelles fonctionnalités d'es6. Il existe en effet un tel projet open source a11y-dialog, qui fournit différentes versions de vue et. réagir respectivement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!