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)

a144f22e2a850e633abba38330027819
    c1a436a314ed609750bd7c7d319db4da Hello world.2e9b454fa8428549ca2e64dfac4625cd
e949bf554aab987df819ed6441bc3609

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.

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

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!