TI1 Projet final | fenêtre modale

fenêtre modale (popup window) 100% CSS

Il est possible de créer une fenêtre modale uniquement à l'aide de CSS.

La technique décrite ici utilise la pseudo-classe :target issue des CSS3. Le résultat est compatible avec les navigateurs actuels, mais ne fonctionne pas sous IE <9 et Firefox <4.

Remarquez que l'apparition de la fenêtre modale étant basée sur un appel d'ancre HTML, elle modifie l'URL de la page courante par l'ajout d'un « hashtag ». Cela n'occasionne généralement pas de problème sauf dans le cas où une application web installée dans la même page utilise aussi cette astuce. Le cas échéant, il est possible d'éviter la modification de l'URL par queques manipulations supplémentaires (qui ne seront pas abordées ici).

Examinez d'abord l'exemple suivant: un clic sur un lien provoque l'apparition d'une fenêtre modale par dessus un masque semi-transparent.

Exemple de fenêtre modale

Voir l'exemple fonctionnel >>>

Le mécanisme de base permettant de changer l'état de visibilité de la fenêtre modale est la pseudo-classe :target. Vous utilisez déjà la pseudo-classe :hover qui permet de générer une action au survol; :target permet, elle, de générer une action au clic de la souris.

L'action engendrée par le clic est simplement un passage de display:none vers display:block pour le conteneur #masque.

L'astuce consiste à créer un «masque», soit un conteneur div avec l'identifiant #masque. Ce div contient à son tour une autre div identifiez par la classe .fenetre-modale présentant le texte de la fenêtre modale.


<p><a href="#masque">Afficher la fenêtre modale</a></p>
<div id="masque">
  <div class="fenetre-modale">
    <a class="fermer" href="#nullepart"><img alt="Bouton fermer la fenêtre" 
	  title="Fermer la fenêtre" class="btn-fermer" 
	  src="images/fmodale_fermer.png" /></a>
    <img alt="Logo CSS3" class="bombe" src="images/css3.jpg" />
    <h2>Fenêtre modale</h2>
    <p>Voici ... </p>
    <p>Remarquez ... </p>
  </div> <!-- .fenetre-modale -->
</div> <!-- #masque -->
  

 

Le conteneur #masque est d'abord invisible (display:none).

Il devient visible au clic du lien « Afficher la fenêtre modale » qui pointe vers l'ancre #masque.

Lorsqu'il devient visible, le masque est positionné avec position:fixed, afin de le soustraire au défilement éventuel de la fenêtre. Puis sa position en top, right, bottom et left est à 0 de manière à ce que ce conteneur couvre la fenêtre du navigateur en entier, qu'elle que soit la taille de cette dernière.

La propriété z-index:1000 assure que le masque soit au premier plan lors de son apparition.

Enfin, une couleur de fond en rgba avec un alpha de 0.5 rend le masque semi-transparent.

Pour ce qui est de la fenêtre modale, sa position dans son parent est déterminée par des marges en pourcentage.

Puisque le div .fenetre-modale est imbriqué à l'intérieur de #masque, il s'affiche naturellement au premier plan lors de son apparition.

Styles pour la fenêtre modale.

TI1 Projet final | fenêtre modale

© 2013 Sylvain Lamoureux