13,00

Tuto JS moderne, Exo #1: Affichage d'une fenêtre modale avec JavaScript, CSS

13,00

  • Une formation vidéo de 1h08m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
JS moderne, Exo #1: Affichage d'une fenêtre modale

ajouter ce cours aux favoris retirer ce cours des favoris

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 :

Table des matières de cette formation JavaScript, CSS (durée : 1h08m)

    • Mise en place de la structure HTML 00:04:38
    • Mise en page avec la technologie CSS-Grid 00:09:08
    • Superposition d'une boîte sur le site 00:03:19
    • Création du bouton d'ouverture de la modale 00:06:31
    • Création de la boîte modale 00:05:52
    • On programme l'affichage de la modale 00:07:39
    • On programme la fermeture de la modale 00:03:39
    • Installation de la librairie animate 00:03:12
    • Animation à l'ouverture de la modale 00:02:54
    • Animation à la fermeture de la popup 00:09:25
    • Décalage de l'animation 00:05:47
    • Conclusion 00:06:50



Formateur : Carl Brison

Carl Brison a publié 194 tutoriels et obtenu une note moyenne de 4,9/5 sur 13 248 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 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.
accédez à plus de 1268 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données