TUTO Créer une InfoBox scrollable sur Tuto.com

Créer une InfoBox scrollable

Problème de lecture

Cette vidéo ne semble pas disponible

00:00

00:00

Sous-titres non disponibles

Un cours de

2,99€

5,0

37m04

Débutant

Fichiers sources

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Présentation
Table des matières

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

Table des matières

Leçon 1Cré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

Publié le 28/04/2015

C'est très bien ce coup-ci. C'est très bien ce coup-ci.

Patrice Dornon

Publié le 03/02/2012

5*

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.

Bundle

Retrouvez ce cours dans le bundle :

Promo -31%

Formateur

4,9

Voir ses cours

Prérequis

Débutant

Accessibilité

Sous-titres non disponibles

Ressources téléchargeables

Fichiers sources (15.19 Ko)

Catégories

Programmation jQuery

Cours publié le 12/12/2011
Langue : Français
ID : 23038

Vos questions sur le cours

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

jQuery

Quel est le niveau requis pour suivre ce tuto ?

débutant

+ 1,000,000 d’apprenants et d’entreprises se forment au quotidien sur Tuto.com

Paiement 100% sécurisé

Ce certificat garantit la sécurité de toutes vos connexions par cryptage.

Besoin d’aide ?

Notre équipe répond à vos questions du lundi au vendredi de 10h à 12h et de 14h à 16h.
Support par e-mail ou par téléphone au 01 84 80 80 29.