3,00

Tuto Créer une InfoBox scrollable avec jQuery

3,00

  • Une formation vidéo de 37m04s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Créer une InfoBox scrollable

ajouter ce cours aux favoris retirer ce cours des favoris

Retrouvez cette formation dans le bundle :

10 Exercices pratiques pour vous améliorer en jQuery

-31% de réduction

voir les détails du bundle


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 !


Formateur : Adrien Gazaix

Adrien Gazaix a publié 201 tutoriels et obtenu une note moyenne de 4,8/5 sur 61 883 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de fastzibon laissé le 28/04/2015
    C'est très bien ce coup-ci. C'est très bien ce coup-ci.

  • 5
    avis de tricepad laissé le 03/02/2012
    5*

  • 5
    avis de fissunix laissé 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.

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    jQuery
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1420 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données