JS moderne, Exo #1: Affichage d'une fenêtre modale
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

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

Carl Brison
12,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Leçon 2
Mise en page avec la technologie CSS-Grid
Leçon 3
Superposition d'une boîte sur le site
Leçon 4
Création du bouton d'ouverture de la modale
Leçon 5
Création de la boîte modale
Leçon 6
On programme l'affichage de la modale
Leçon 7
On programme la fermeture de la modale

Plan détaillé du cours

Leçon 1Mise en place de la structure HTML
04m38
Leçon 2Mise en page avec la technologie CSS-Grid
09m08
Leçon 3Superposition d'une boîte sur le site
03m19
Leçon 4Création du bouton d'ouverture de la modale
06m31
Leçon 5Création de la boîte modale
05m52
Leçon 6On programme l'affichage de la modale
07m39
Leçon 7On programme la fermeture de la modale
03m39
Leçon 8Installation de la librairie animate
03m12
Leçon 9Animation à l'ouverture de la modale
02m54
Leçon 10Animation à la fermeture de la popup
09m25
Leçon 11Décalage de l'animation
05m47
Leçon 12Conclusion
06m50

Avis des apprenants

Détail des avis
93
Apprenants
6
Commentaires
5/5
Note moyenne
5/5
6
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 24/01/2023
Merci Carl pour ce tuto sur l'affichage d'une fenêtre modale. Assurément, ce tuto va m'être très utile pour mes futurs sites comme Dev Frontend. Surfer sur le code avec vous est un vrai plaisir. Validé 100 % JS moderne EXO#1
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Jonathan Vaillant
Jonathan Vaillant
Publié le 03/02/2022
Très bon exercice pour s'exercer, je recommande
Carl Brison
Carl Brison
Merci à vous ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 31/01/2022
Tuto impeccable comme c'est toujours le cas avec vous
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source de l'exercice.

Payer plus tard

Prix d'achat : 12,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données