Boîte de dialogue animée par les styles Css

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Boîte de dialogue animée

Grâce aux styles Css, nous allons voir comment personnaliser certains outils d'un site Web, ici notamment pour communiquer avec l'utilisateur.



Sur l'exemple illustré par la capture, au clic de l'utilisateur sur un bouton, une boîte de dialogue glisse depuis la partie supérieure de la page jusqu'à se fixer au beau milieu du visuel. Dans le même temps, tout l'arrière-plan du document est tapissé d'un voile opaque. C'est ainsi que les informations essentielles de cette boîte de dialogue sont mises en lumière.

Sources de développement
Pour la mise en place de cette nouvelle astuce Css, nous suggérons de débuter l'étude à partir d'une page Web déjà bien amorcée.

• Télécharger le fichier compressé effet-boite-dialogue-css.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression livre le fichier de la page Web. Il est nommé index.htm. Les feuilles de styles sont quant à elles hébergées par le sous dossier Css.

• Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur Web par défaut,

Nous retrouvons une page semblable à celle de la présentation, mais au clic sur le bouton Afficher Informations, rien ne se produit. La boîte de dialogue ne semble pas exister. Elle est pourtant bien présente dans la construction de la page Html mais elle est encore masquée à ce stade.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Nous découvrons les références aux feuilles de styles en entête de code. C'est la seconde, nommée les-styles.css, que nous allons implémenter pour gérer cette boîte de dialogue. La construction qui nous concerne est située plus bas dans le code Html, plus précisément dans le calque d'identifiant auCentre.

...
<div id="auCentre">

<button class="bouton noir">Afficher Informations</button>

<div id="boiteD" class="boite">
<div class="boite-contenu animation-haut">
<header class="conteneur bleu" style="border-bottom:#000 2px solid;">
<span class="bouton affichage">&times;</span>
<h2>Information</h2>
</header>
<div class="conteneur">
<p>Ce site est un site de divertissement..</p>
<p>Tous les outils sont organisés par catégories</p>
<p>Vous pouvez les parcourir à l'aide des menus</p>
</div>
<footer class="conteneur bleu" style="border-top:#000 2px solid;">
<p>Mentions légales</p>
</footer>
</div>
</div>

</div>
...

Le calque d'identifiant boiteD est le calque conteneur. C'est lui que nous devons afficher. Il est associé au style boite. Son affichage doit être commandé par le clic sur le bouton qui est situé juste au-dessus dans le code Html. Le calque imbriqué juste en-dessous représente la construction de la boîte de dialogue qu'il contient. Il est associé à deux styles Css : boite-contenu et animation-haut. Vous l'avez compris, c'est le second style que nous allons implémenter pour créer cet effet d'animation entrant. Cette boîte de dialogue est constituée d'un entête (header), d'un contenu central (Balise Div) et d'un pied (footer).

• A la racine du dossier de décompression, double cliquer sur le sous dossier Css,
• Dès lors, cliquer droit sur le fichier de la feuille de styles les-styles.css,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

De nombreux styles Css existent déjà. Dans le style boite, celui gérant le calque conteneur de la boîte de dialogue, vous notez que la valeur fixed est passée à l'attribut position. Il pourra ainsi se positionner dans la page Web indépendamment des autres éléments Html, sans influer sur leurs emplacements. Sa largeur (width) et sa hauteur (height) sont réglées sur 100%. Il recouvre donc l'intégralité de la page. C'est grâce à ce réglage que nous pourrons appliquer un effet d'opacité global destiné à faire briller cette boîte de dialogue. D'ailleurs son fond est d'ores et déjà paramétré sur une couleur noir (background-color:rgb(0,0,0)) qu'il conviendra d'adoucir dans une prochaine étape. Sa propriété display est fixée sur la valeur none si bien que ce calque est masqué par défaut.

Juste en-dessous, le style boite-contenu gère la boîte de dialogue. Il s'agit donc du calque aux deux styles, directement imbriqué dans la construction Html. L'attribut margin:auto permet de la centrer dans la largeur disponible. L'attribut position:relative du style animation-haut qui suit permet de garder les éléments en son sein dont le bouton de fermeture, matérialisé par un code Html : &times;. Il s'agit du symbole d'une croix.

Afficher / Masquer la boîte
Pour débuter la construction, nous proposons dans un premier temps d'afficher et de masquer la boîte de dialogue. Pour cela, deux boutons sont dédiés. Le tout premier est situé au-dessus du calque d'identifiant boiteD. Le second est plus sournois. Il est géré par un élément Html de type span et matérialisé par le code Html que nous évoquions (<span class="bouton affichage">&times;</span>). Tous deux doivent accueillir un gestionnaire d'événements (onclick), déclenchant une action Javascript.

• Dans l'éditeur Notepad, revenir sur le code de la page index.htm,
• Dans le premier bouton, ajouter le gestionnaire Javascript suivant :

<button onclick="document.getElementById('boiteD').style.display = 'block'" class="bouton noir">Afficher Informations</button>

Au clic (onclick), nous commandons l'affichage du calque d'identifiant boiteD. C'est effectivement la méthode getElementById de l'objet document qui permet de pointer sur ce dernier grâce à son nom passé en paramètre. Puis, grâce à la propriété style du calque ainsi récupéré, nous descendons jusqu'à son attribut Css display pour le régler sur la valeur block. Nous le rendons donc visible pour l'afficher dans le flux du document. Il faut bien respecter les simples côtes qui encadrent la valeur de l'attribut. Nous les utilisons car les doubles côtes sont déjà exploitées pour encadrer la syntaxe Javascript.

• Dans le second bouton matérialisé par l'élément span, ajouter le gestionnaire suivant :

<span onclick="document.getElementById('boiteD').style.display = 'none'" class="bouton affichage">&times;</span>

La syntaxe est similaire mais le résultat est inversé. Grâce à la valeur none de l'attribut display, au clic sur la croix de la boîte de dialogue, nous masquons cette dernière.

• Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
• Actualiser son contenu avec la touche F5 du clavier,
• Puis, cliquer sur le bouton Afficher informations,

Le calque de la boîte de dialogue apparaît en effet. Mais comme vous pouvez le constater, il fait irruption. En l'absence d'animation, son apparition est effectivement intrusive. De plus, en raison de son attribut background-color réglé sur une couleur noire, il masque tous les autres éléments de la page Web.

Si vous cliquez sur le symbole de la croix en haut à droite de la boîte de dialogue, celle-ci disparaît et laisse revenir tous les éléments de la page Web.

Animation entrante
Il est temps désormais de faire apparaître cette boîte de dialogue avec plus de politesse. Nous l'avons découvert subrepticement dans la feuille de styles, le style animation-haut déclare une animation qu'il nomme animerHaut : animation:animerHaut 0.4s. Elle doit se jouer sur quarante centièmes de secondes. Et comme nous l'avons appris dans les volets précédents, c'est un keyframes qui peut exploiter ce nom pour définir les étapes de l'animation pour cette boîte de dialogue.

• Revenir dans l'éditeur Notepad sur le code de la feuille de styles Css,
• Sous le style animation-haut, créer son keyframes comme suit :

.animation-haut
{
position:relative;
animation:animerHaut 0.4s
}
@keyframes animerHaut
{
from{top:-300px;opacity:0}
to{top:0px;opacity:1};
}

En paramètre, il pointe tout de suite l'animation à piloter par son nom. Ensuite, il gère les étapes avec les mots clés from et to. Le calque de la boîte de dialogue doit se situer 300 pixels au-dessus de la position d'origine et doit être totalement transparent (opacity:0). A l'arrivée, soit au bout de 0,4 seconde, il doit être placé dans le flux (top:0px) et doit avoir recouvré son opacité totale.

• Enregistrer les modifications et basculer sur la page Web,
• Actualiser le cache du navigateur avec le raccourci clavier CTRL + F5,
• Puis, cliquer sur le bouton Afficher Informations,

Comme vous pouvez le voir, dans un dégradé d'opacités, la boîte de dialogue rejoint sa position en respectant le délai défini par l'animation. Le Javascript commande son affichage mais le calque Html respecte les règles qui lui sont dictées par son style enclenchant un keyframes pour gérer les étapes de son apparition. En revanche et fort logiquement, les éléments de la page Web en arrière-plan demeurent complètement masqués à ce stade.

Opacité de l'arrière-plan
Pour finir et pour plus de distinction, nous souhaitons révéler subtilement les éléments situés en arrière-plan de la boîte de dialogue. Ainsi, tout en conservant un visuel complet, nous continuerons de la mettre en lumière.

• Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
• A la fin du style boite, ajouter l'instruction Css suivante :

.boite
{
display:none;
padding-top:100px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
}

Nous ajoutons un réglage supplémentaire sur l'arrière-plan grâce à l'attribut background-color. D'ailleurs, il occulte et remplace le premier réglage opéré grâce à ce même attribut, si bien que la ligne du dessus peut disparaître. Grâce à la fonction Css rgba et non rgb, il agit sur les propriétés (opacité) du calque mais pas sur ses dépendances. De fait, c'est uniquement l'arrière-plan (width:100%) qui est impacté pour subir le paramétrage de transparence, sans que la boîte de dialogue encapsulée ne soit concernée.

• Enregistrer les modifications et revenir sur la page Web,
• Actualiser le cache du navigateur avec le raccourci clavier CTRL + F5,
• Cliquer sur le bouton Afficher Informations,

Comme vous pouvez le voir, la boîte de dialogue apparaît plus subtilement avec un effet d'animation entrant. L'arrière-plan de la page reste visible mais un voile se dresse pour minorer son statut. Et si vous cliquez sur la croix, la boîte de dialogue disparaît et toute la lumière est rendue à la page.