Création du message popup (bas droite de l'écran)

Jospel
Les bases HTML/CSS

Bonjour tout le monde

Je débute dans la création de site web en apprenant le HTML et CSS.
Un ami souhaitait que je lui créé un site pour sa compagnie (artisanat) car il est connu que quand vos amis savent que vous connaissez bien le monde du PC, ben ils pensent que vous savez tout faire ( création web, animation 3D ...) .
Cependant cela m'a interessé et le résultat fut satisfaisant.
Mais voila, maintenant cet ami me demande un truc un peu spécial qu'on retrouve dans la plupart des sites marchands :
cette petite fenêtre pop up en bas à droite de l'écran vous demandant si vous avez besoin d'aide et vous mettant en relation avec un chat( pas l'animal hein).

J'ai donc fait une recherche du genre "message popup clientele" bref, je n'ai pas vraiment trouvé de tutorial sur ce que je voulais.
Bien sûr je ne vous demande pas de me dire comment faire en détail mais je souhaite savoir si cet effet a un nom spécial pour affiner mes recherches.

L'idée n'est pas en fait ne faire une mise en relation mais tout simplement de créer un message qui pop en bas/droite pour transmettre certains messages généraux.

merci

6 réponses

saibe

hello,
tu sais déjà placer une 'div' en bas à droite ?

Jospel
Auteur

Bonjour Saibe, merci pour ton temps.

Je pense pour positionner ma div en bas à droite dans le css j'écris :
div {
position: fixed;
bottom: 0px;
right:0px
}

saibe

re,
oui c bon, précise une width et une height et je rajouterais un left : autoet top : auto pour éviter certains pbs...
ensuite pour l'apparition, si tu ne veux pas utiliser javascript, donc full-css tu peux t'inspirer des exemples de cette page, ça utilise le principe des targets...

Jospel
Auteur

Si je comprends bien, c'est une simple div positionnée à laquelle on applique un animation keyframe .
Faudra que je m'entraine sur les animations css alors. pour qu'elle apparaisse toute seule et disparaisse après un temps d'affichage.
Au boulot ...
merci

saibe

oui, c ça...
sinon tu peux le faire avec un peu de javascript, à toi de voir....

mxmaxime

Si tu souhaites le faire avec javascript il n'y a rien de bien méchant, tu ajoutes une class (qui fait apparaître la div), puis lance un timer qui enlèvera cette class (donc cachera la div) :-)