Créer une InfoBox scrollable
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
37m05
de formation
1
leçon vidéo
1
chapitre
Débutant
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Créer une InfoBox scrollable

4.8/5 Trustpilot (1392 avis) Satisfait ou remboursé
37m05
de formation
1
leçon vidéo
1
chapitre

Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer une InfoBox pour mettre en avant du contenu un peu comme une lightbox pour des images. Pour cela, nous prendrons exemple sur des conditions générales de vente qui seraient affichées en surimpression de votre site.

Déroulement du tuto popin jQuery :

  • Résultat du tuto
  • Création du bouton en HTML
  • Création de l'InfoBox en HTML
  • Stylisation de celle-ci en CSS
  • Rendre scrollable le div contenant le contenu
  • Ajouter le code Jquery pour faire une action au click sur le bouton
  • Faire apparaître le fond noir puis l'InfoBox
  • Faire l'inverse en créant une action sur la croix pour fermer le tout
  • Ajouter un plugin Jquery pour personnaliser la scrollbar avec les CSS
  • Modifier la couleur / le background de la scrollbar

Tout est fourni dans les sources pour que vous puissiez reproduire le système d'InfoBox sur votre site.
Bon tuto à tous !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Créer une InfoBox scrollable

Table des matières

Leçon 1

Créer une InfoBox scrollable

37m05

Aperçus

Avis des apprenants

Détail des avis
216
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Fastzibon
Fastzibon
Publié le 28/04/2015
C'est très bien ce coup-ci. C'est très bien ce coup-ci.
Patrice Dornon
Patrice Dornon
Publié le 03/02/2012
5*
Frédéric Kempf
Frédéric Kempf
Publié le 12/01/2012
Parfait ! Exactement ce dont j'avais besoin. Très bon tutoriel. Merci. Je ne sais pas si c'est le bon endroit pour poser une question mais je n'ai pas trouvé comment contacter le formateur... Bref ma question : Sur IE8, le fond noir (#fond-noir) n'apparait pas (pas de fade in, rien) mais l'anim de l'infobox est OK et fonctionnel. Existe-t-il un petit hack pour faire apparaitre ce fond sous IE8 ? Merci.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
2,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
37m05 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 784 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données