Modal

La modal permet de faire une fenêtre d'affichage pour montrer du contenu supplémentaire.

Dépendances

Modal

Y'en a pas!

Comment l'utiliser (HTML + CSS)

Afin d'utiliser la composante, il nous suffit de faire la structure HTML suivante:

Et voici maintenant la structure de la fenêtre modale en elle-même

Pourquoi template et non pas div ou section?

Simplement puisque template nous permet de cacher son contenu à l'utilisateur

Les différentes classes CSS de la fenêtre modale et ce qu'elles font

modal: agis comme le gros holder qui comprends toute la fenêtre modale

modal__scrim: est responsable pour le fond opaque derrière la fenêtre modale

modal__box: gère les styles liés à la boîte en elle-même

modal__close: gère les styles liés à l'animation du bouton de fermeture de la boîte

Pour rendre le tout un peu plus vivant, il faudrait bien l'animer un peu:

Classe d'état

Afin d'empêcher le scrolling inutile dans la page lorsqu'une fenêtre modale est active, dans le cas où nous devions scroller DANS la fenêtre modale en elle-même, une classe doit être placé sur l'élément HTML de la page: modale-is-active

Exemple d'une modal assez classique

modale-is-active

Voir un démo de « modal »

Mais qu'arriverais t'il si l'on voulait une fenêtre modale qui s'ouvre automatiquement?

dataTimer

Voir une démo de dataTimer