Infographie et WebMania, WebDesign, CV Webmestre

Une popup sans javascript

Nous allons voir comment réaliser une fenêtre qui se superpose à la page en cours, pour agrandir une image par exemple, en utilisant la propriété "Display" de CSS. Il faut tout de même un langage qui permette de renvoyer une variable à cet élément pour changer son comportement. Ici j'utilise PHP. Exemple de popup en CSS.


Première étape : La feuille de style

Pour que ce sript fonctionne, nous allons créer un div qui aura entre autres la propriété display: none; par défaut. Il faut également que ce div soit en position: absolute; pour ne pas être perturber par les autres éléments de la page. Ce qui donne pour commencer :

#popExemple { display: none; background-color: #f7f7ef; position: absolute; top: 10px; left: 10px; z-index: 10000; /* utile pour que votre fenêtre passe au dessus du reste */ }

Remarque : Ce div ayant ici pour id PopExemple, doit se trouver dans un autre élément ayant une position:relative; pour que sa position soit prise en compte. Le div général contenant votre site par ex.


Ensuite le php

Php ne sert ici qu'à tester l'existence ou non de la variable envoyée. Donc en début de page, on place un petit bout de code qui peut ressembler à ceci. Dans cette variable on peut imaginer ce qu'on veut... Un identifiant pour récupérer une info dans une base de données par ex.

//============= test popup exemple ===============// // si la variable existe if ( isset ( $_GET['maVariable'] ) ) { // on passe le style du div en display: inline; $styleDiv = 'style="display:inline;"'; } else { // sinon c'est un element vide $styleDiv = ''; } //============ / test popup exemple ===============//

Remonter


Puis la mise en place du code html pour la popup

Cette partie de code doit se trouver plus bas dans la page que votre test php, et se présente comme ça. Remarquez la petite portion de php qui sert à afficher le style.

<div id="popExemple" < ?php echo $styleDiv; ?>> <p>Un clic sur l'image pour refermer la fenêtre.</p> <a title="refermer" href="index.php?page=maPageSansLaVariable"> <img alt="exemple" src="img/exemplePopup.jpg" /> </a> </div>

Ici j'ajoute un lien sur l'image qui permet de refermer la fenêtre en renvoyant vers ma page mais sans la variable, ce qui aura pour effet de repasser mon style en display: none;.
On peut également se servir de php pour préciser que si on ne reçoit pas de variable, on ne mets pas du tout de contenu. Pour exemple, comparez le code source de cette page avec et sans la fenêtre ouverte.


Enfin, le lien

Pour finir, on place un lien où on veut dans la page et qui va ressembler à ceci.

<a title="ouvrir la popup" href="index.php?page=maPage&amp;maVariable=yes"> Ma super Popup </a>

Remonter


En résumé

Votre page index.php va se présenter comme ceci.

< ?php // si la variable existe if ( isset ( $_GET['maVariable'] ) ) { // on passe le style du div en display: inline; $styleDiv = 'style="display:inline;"'; } else { // sinon c'est un element vide $styleDiv = ''; } ?> <html> <head><title>Mon titre</title></head> <body> <!-- mon div en position relative --> <div id="global"> <!-- la popup en position absolute --> <div id="popExemple" < ?php echo $style; ?>> <p>Un clic sur l'image pour refermer la fenêtre.</p> <a title="refermer" href="index.php?page=maPageSansLaVariable"> <img alt="exemple" src="img/exemplePopup.jpg" /> </a> </div> <div id="contenu"> <p>blablablabla blabla blablabla blabla blabla</p> <p>blabla <a title="ouvrir" href="index.php?page=maPage&amp;maVariable=yes"> Ma super Popup</a> blabla blabla</p> </div> </div> </body> </html>

Bien sûr, ce n'est qu'un condensé... On peut incorporer ce qu'on veut dans cette fenêtre.

  • - Du php pour interroger une base de données ou un système de pagination.
  • - Une animation Flash comme sur la page Goodies.
  • - Une image agrandie comme ici.
  • - Un formulaire de contact ou autre.
  • - Etc.

Le but étant d'afficher du contenu, sans utiliser de popup en javascript avec son lot de contraintes tout en gardant la page qui nous intéresse en fond.

Voilà pour ce premier tuto. J'espère, qu'il vous sera utile et qu'il vous aura peut-être permis de découvrir quelque chose. Si vous avez des commentaires ou des questions, n'hésitez pas à me contacter.

Remonter