Popup en CSS3

Voici une méthode parmi toutes celles qui existent pour créer une Popup en utilisant uniquement du CSS. Oubliez le JavaScript et utilisez le style !

Popup 100% CSS

Pour ouvrir une nouvelle fenêtre (pop-up), on pense souvent au Javacript, qui permet de le faire facilement.
Seulement, le contenu du pop-up n’est pas indexable puisqu’il n’est pas parcouru par les moteurs de recherche (à cause du javascript).
De plus, l’ouverture de pop-up peut-être bloquée par les bloqueurs de pop-up intégrés aux navigateurs récents. Cette solution n’est donc pas à proscrire car elle surprend l’utilisateur.

Voici une méthode parmi toutes celles qui existent pour créer une Popup en utilisant uniquement du CSS. Oubliez le JavaScript et utilisez le style !

Le but est de créer un lien qui lors du passage de la souris ouvre un bloc par-dessus contenant des informations (textes, images). Le contenu de ce bloc sera bien évidemment une charge en plus lors du téléchargement par l’utilisateur de la page et sera également indexé par les mots des moteurs de recherches.

Cette solution est bien sûr compatible sur les navigateurs modernes, Internet Explorer et Firefox.

Libre à vous de donner ensuite un style correspondant au design de votre site Web.

unlienquiaffichepopup1.jpg

L’astuce est de définir le bloc en display : none et en display: block au survol lorsque la souris passe sur le lien.
Tout se joue grâce à la propriété de style hover et la balise

Une popup en CSS3

Une popup avec du texte

Tout d'abort nous avons besoin d'un lien :


Passe ta souris ici !

Puis d'un bloc, entre autre la popup qui s'affichera lors du survol du lien :



Je place ici mon texte, ou des images, ou les deux 😉

Le code complet à saisir dans votre feuille HTML :


Un lien qui affiche une pop-up !

Une popup en CSS3

"But I must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete
account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness. No one
rejects, dislikes, or avoids pleasure itself, because it is pleasure,
but because those who do not know how to pursue pleasure rationally
encounter consequences that are extremely painful. Nor again is there
anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in
which toil and pain can procure him some great pleasure. To take a
trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any
right to find fault with a man who chooses to enjoy a pleasure that has
no annoying consequences, or one who avoids a pain that produces no
resultant pleasure?"

Pour la forme, dans votre feuille de style :


a.bulle
position:relative;
color:#cc0066; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; font-size:18px;

a.bulle:hover
background: none; z-index: 100;

a.bulle span display: none;

a.bulle:hover span
display: block; position: absolute;
top: 30px; left: 20px;
font-family:arial, verdana, sans-serif; text-align:justify; font-size:12px;
font-weight:normal;
width:400px;
background: white;
padding: 5px;
border: 2px solid #cc0066;

 webkit-border-radius: 10px;

 moz-border-radius: 10px;
border-radius: 10px;

Une popup avec une image

Vous pouvez bien évidement coupler du texte et des images dans la même popup.

Télécharger le code

1 réponse

Laisser un commentaire

Rejoindre la discussion?
N’hésitez pas à contribuer !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.