4.8/5 Trustpilot (1399 avis)
Dev. FrontEnd#2 :: Mise en place d'un Popup
Dev. FrontEnd#2 :: Mise en place d'un Popup
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 :
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Mise en place de la structure HTML
Mise en place de la structure HTML
Leçon 2
Mise en page avec la technologie CSS-Grid
Mise en page avec la technologie CSS-Grid
Leçon 3
Superposition d'une boîte sur le site
Superposition d'une boîte sur le site
Leçon 4
Création du bouton d'ouverture de la modale
Création du bouton d'ouverture de la modale
Leçon 5
Création de la boîte modale
Création de la boîte modale
Leçon 6
On programme l'affichage de la modale
On programme l'affichage de la modale
Leçon 7
On programme la fermeture de la modale
On programme la fermeture de la modale
Table des matières
Leçon 1
Mise en place de la structure HTML
04m38
Leçon 2
Mise en page avec la technologie CSS-Grid
09m08
Leçon 3
Superposition d'une boîte sur le site
03m19
Leçon 4
Création du bouton d'ouverture de la modale
06m31
Leçon 5
Création de la boîte modale
05m52
Leçon 6
On programme l'affichage de la modale
07m39
Leçon 7
On programme la fermeture de la modale
03m39
Leçon 8
Installation de la librairie animate
03m12
Leçon 9
Animation à l'ouverture de la modale
02m54
Leçon 10
Animation à la fermeture de la popup
09m25
Leçon 11
Décalage de l'animation
05m47
Leçon 12
Conclusion
06m50
Avis des apprenants