Popups et modaux natifs avec l'élément HTML5 «dialog»

, et le

éléments, chacun établissant une nouvelle section de contenu de manière indépendante. Vous pouvez le placer en tant qu’enfant du corps ou l’intégrer dans un élément comme un

ou

-les deux approches sont valables.

Les navigateurs compatibles (Chrome 37+ et Opera 27+) afficheront le

élément masqué par défaut, le rendant uniquement visible sur demande avec JavaScript en utilisant spectacle() ou showModal (), et le Fermer() méthode pour le cacher à nouveau. Habituellement, nous exécutons cette méthode dans un Cliquez sur événement, comme si:

var $ accountDelete = $ ('# # delete-account'), $ accountDeleteDialog = $ ('# confirm-delete-' '); $ accountDelete.on ('cliquez', fonction () $ accountDeleteDialog [0] .showModal ();); $ ('# cancel'). on ('cliquez', fonction () $ accountDeleteDialog [0] .close ();); 

le spectacle() v. showModal () Méthode

Il est à noter que spectacle() et showModal () se comporter différemment.

le spectacle() méthode révèle l'élément en fonction de sa position dans le flux DOM. Si vous l'avez ajouté juste avant la balise de fermeture du corps, il est possible qu'il apparaisse au bas de la page Web. Nous devrions ajouter des styles personnalisés pour ajuster sa position, par exemple si nous voulons le placer au centre de la page. Ces styles utiliseraient généralement z-index d'empiler l'élément au-dessus des autres éléments, le position propriété définie sur absolu, de même que la gauche et Haut.

le showModal () La méthode, d’autre part, affichera l’élément sous forme de modal. Il sera affiché au centre de la page par défaut et il se situera dans la couche supérieure, comme l’API fullScreen, qui empêche les interférences de z-index, position relative et débordement de l'élément parent.

Dans la plupart des cas, il est probable que nous utiliserions la commodité de showModal () à la place du spectacle() méthode.

Personnaliser les styles

La boîte de dialogue contient le style par défaut des navigateurs, qui peut être facilement remplacé comme la plupart des autres éléments. Vous pouvez, par exemple, amincir la bordure de la boîte de dialogue, arrondir les coins et ajouter une ombre portée.

En outre, lorsque le

l’élément est montré sous forme de modal (en utilisant le showModal () méthode), nous avons un pseudo-élément supplémentaire, :: toile de fond, à notre disposition. le :: toile de fond L’élément est situé immédiatement sous la boîte de dialogue, couvrant l’ensemble de la fenêtre et le reste des éléments situés en dessous..

Il est courant de styliser le fond avec une opacité faible, cliquez sur le bouton rouge pour le voir en action:

Ajouter un style avec des transitions

La personnalisation des styles de boîte de dialogue devrait être simple, mais qu'en est-il de l'ajout d'une transition CSS? Que diriez-vous de révéler progressivement la boîte de dialogue, en utilisant un effet de redimensionnement, plus ou moins comment OS X le fait?

Étape 1

Pour commencer, réduisons le dialogue de 90%, spécifions la transition et le masquons.

dialogue visibilité: masqué; transformer: échelle (0,1); transition: transformer 200ms;  

Étape 2

Maintenant, nous définissons un sélecteur de classe qui redimensionnera la boîte de dialogue à la taille voulue et la rendra visible..

dialog.dialog-scale visibilité: visible; transformer: échelle (1);  

Étape 3

Notre astuce maintenant est que nous allons «maintenir» la boîte de dialogue à sa petite échelle pendant quelques millisecondes avant d’ajouter la classe. échelle de dialogue. Pour ce faire, nous utilisons JavaScript setTimeout () méthode pour ajouter la classe:

transition var; $ accountDelete.on ('click', function () $ accountDeleteDialog [0] .showModal (); transition = setTimeout (function () $ accountDeleteDialog.addClass ('dialog-scale');, 0.5);) ; 

Étape 4

N'oublions pas de supprimer cette classe et d'effacer le délai d'attente lorsque la boîte de dialogue est fermée.

$ ('# cancel'). on ('click', function () $ accountDeleteDialog [0] .close (); $ accountDeleteDialog.removeClass ('dialog-scale'); clearTimeout (transition);); 

Nous sommes tous ensemble! Vous pouvez faire un tour dans la démo suivante:

Emballer

le

est vraiment pratique, mais toujours très médiocre en ce qui concerne la prise en charge du navigateur. Si et lorsque tous les principaux navigateurs l'ont mis en œuvre, nous compterons moins sur les bibliothèques, notre structure de contenu sera plus sémantique, correctement accessible pour les technologies d'assistance et nous disposerons d'un moyen standard de fournir des dialogues modaux..

http://caniuse.com/#feat=dialog

Jusque-là, vous pouvez utiliser le polyfill de Google Chrome pour le simuler dans des navigateurs non compatibles..

Ressources supplémentaires

• Spécification d'élément de dialogue HTML5
• Prise en charge du navigateur d'élément de dialogue
• Modal et Modeless Boxes dans Web Design
• Ce que vous ignorez peut-être à propos de la propriété Z-Index

Création de sites web