Tuto publié par 
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 !
Jetez un oeil à ces autres tuto jQuery 1.7
Créer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…
Animer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…
Mettre en place un panneau…
Dans ce tuto Jquery gratuit en vidéo, nous allons voir ensemble…
Mettre un background vidéo…
Dans ce tuto Jquery en vidéo, nous allons voir comment ajouter…
Créer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…
Créer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…
Créer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…
Créer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7 de 37 minutes est proposée dans une résolution plus grande que l’extrait suivant :
spykrew07
, Formateur
Salut, moi c’est Adrien, j’ai 27 ans et je suis Graphiste / Webdesigner depuis 5 ans maintenant. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 3 ans et depuis peu je me suis lancé en freelance. Je souhaite partager mes connaissances avec vous membres de tuto.com et j’essaierai d’être le plus didactique possible dans mes tutoriaux. Ma devise : Webdesign is not a job, it’s a passion !
En savoir plus sur spykrew07
Témoignage des clients de spykrew07
Je viens d'acheter plusieurs de ses tutos et je trouve que Spykrew07 est un excellent formateur. je recommande ses formations!
Des tuto sympa mais parfois un peu chers.
Très bon formateur, j'ai acheté beaucoup de ses tuto, le timbre de voix passe bien en continu, et bon ritme d'apprentissage. Je recommande.
Les tutos wordpress de ce formateur sont tout simplement INDISPENSABLES
je n'ai pas encore terminé les tutos, mais pour une bille comme moi, je comprends tout. Un grand merci
Lire les autres témoignages
D'autres tuto de spykrew07
Créer un filtre pour trier des projets dans votre portfolio
Dans ce tuto Jquery en vidéo, nous verrons comment créer un système de filtres pour…
Apprenez les Bases de la 3D sur Illustrator
Dans ce tuto Illustrator en vidéo, nous allons voir ensemble comment créer à partir…
Créer une lightbox simplement
Dans ce tuto Jquery en vidéo, nous verrons comment créer une lightbox pour vos images.…
Processus de création d'un logo et de ses déclinaisons
Dans ce tuto Illustrator en vidéo, nous allons voir ensemble comment créer un logo…
Notes attribuées par les utilisateurs (2 votes)
Les avis / Questions des utilisateurs (3)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto jQuery 1.7 d’une durée de 37 minutes a été acheté 73 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 12 décembre 2011 par spykrew07, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery webdesign.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
Choisissez parmi 24011 tuto classés dans nos 201 logiciels ou langages informatiques.
(a acheté ce tuto - 03 février 2012)
" 5* "
(auteur de ce tuto - 12 janvier 2012)
" @fissunix Dans le CSS, soit tu mets sur #fond-noir : background-color:#000; et cela te donnera un noir pur sans opacité, soit tu fais un fichier PNG sous Photoshop de 1px avec du noir à 80% et tu le met en repeat en CSS comme ça : background:url(image.png) top left repeat
En fait, c'est le RGBA qui n'est pas pris en compte par ie8 tout simplement donc il faut ruser.
Merci de ce retour positif ;) "
(a acheté ce tuto - 12 janvier 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. "