TUTO JS moderne, Exo #1: Affichage d'une fenêtre modale

La théorie, on en a besoin. Mais la pratique : on en a encore plus besoin !
Je vous propose dans ce cours en ligne, de continuer à manipuler le JavaScript Moderne, que nous avons appris ensemble dans la série de tutos dédiées à l'apprentissage du JavaScript moderne.

Pour cet exemple, nous allons apprendre à mettre en place une fenêtre modale (ou pop-up modale). Cet élément web très utilisé, permet d'avertir l'utilisateur de votre site Internet sur une action qu'il doit absolument réaliser ou une information importante. Il est donc intéressant de savoir mettre en place une modale sur votre site Internet. Et c'est justement ce que nous allons apprendre à réaliser avec Javascript et un peu de CSS.

Au programme de ce tuto Exercice Javascript Moderne : mise en place une fenêtre modale

Dans cette formation orientée pratique, nous allons voir : 

• comment déclencher l'apparition de la modale grâce au JavaScript Moderne, au clic de l'utilisateur sur un bouton,
• comment griser le reste de l'interface de votre site ou application,
• comment fermer la fenêtre,
• ce n'est pas tout ! Nous verrons comment animer l'apparition ainsi que la fermeture de la modale.
• le tout de manière responsive !

L'objectif de cet exercice JavaScript pratique, étant de bien comprendre toute cette gymnastique de code, afin de pouvoir le reproduire dans tous les cas similaires que vous pourrez rencontrer dans votre carrière de développeur frontend.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation. Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
 

Pré-requis du cours :

Pour suivre ce tutoriel vidéo dans de bonnes conditions, il est recommandé de connaître :

• Les bases du JavaScript moderne
• La technologie CSS-Grid
• La gestion des animations en CSS moderne