Créer une fenêtre modale avec CSS 3

CSS permet de cibler des éléments particuliers d'un document à l'aide de sélecteurs. Parmi les plus connus, element permet de cibler les balises <element>, .classe permet de cibler les balises ayant la classe donnée, de même pour #id avec un identifiant.
Bien sûr, de nombreux types de sélecteurs permettent d'affiner au mieux le ciblage.

Mais CSS permet aussi de cibler des parties d'un élément en fonction de leur nature. Ce sont les pseudoéléments. C'est-à-dire qu'ils n'ont pas besoin d'être entourés de balise pour pouvoir être récupérés. Par exemple, :first-letter ou :first-line permettent de donner un style à la première lettre ou la première ligne d'un élément sans pour autant avoir besoin d'utiliser une balise pour les isoler.
De même, il est possible de cibler un élément par rapport à une interaction, il s'agit alors de pseudoclasse. Un peu comme si l'on affectait une classe spécifique dans un contexte particulier.
Parmi les pseudoclasses connues, celles concernant les liens (:link, :visited, :hover, :focus, :active) sont couramment employées et se comportent comme si le lien possédait une classe différente liée à chacun de ces états.
Avec CSS 3, il existe de nombreuses pseudoclasses. Celle qui nous intéresse dans le cadre d'une fenêtre modale étant :target.

Le cadre gris ci-dessous possède l'identifiant monAncreCible. Le premier des liens pointe vers cette ancre alors que le second lien pointe vers le premier.
Voici le code :

<style>
#monAncreCible{
    width: 80%;
    height: 50px;
    background-color: silver;
}
#monAncreCible:target{
    background-color: gold;
}
</style>
<div id="monAncreCible"></div>
<p>
    <a href="#monAncreCible">Changer la couleur de la boîte</a><br />
    <a href="#noWhere">Rétablir la couleur</a>
</p>

Changer la couleur de la boîte
Rétablir la couleur

Comme vous pouvez le tester, lorsque vous cliquez sur le premier lien, la boîte change de couleur : l'élément ciblé par le lien prend bien le style déclaré avec :target. En revanche, lorsque vous cliquez sur le second lien, l'élément visé change, la boîte n'est plus affectée par la pseudoclasse et reprend son aspect d'origine.

Pour éviter que la page ne se repositionne au niveau de l'ancre lorsque l'on veut retirer l'effet de :target, on fait pointer le lien vers une ancre inexistante, comme dans l'exemple.

Le masque opaque ne doit être affiché que lorsque nous cliquons sur le lien souhaité. Il sera donc invisible par défaut.
De plus, nous souhaitons qu'il empêche toute interaction avec le reste de la page, il faut donc qu'il couvre totalement celle-ci.
La meilleure solution pour cela est de lui donner un display: none; et une position: fixed.
Il ne reste plus ensuite qu'à définir ses dimensions, sa couleur de fond, son opacité et si besoin son z-index.
Voici le code correspondant.

#overlay{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: black;
    opacity: 0.5;
    z-index: 1000;
}
#overlay:target{
    display: block;
}
#overlay a{
    font-weight: bold;
    padding: 10px 25px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50px;
}

<div id="overlay"><a href="#noWhere">Supprimer le masque</a></div>
<p><a href="#overlay">Afficher le masque</a></p>

Afficher le masque

Notez aussi le lien ajouté par-dessus le masque : c'est le seul moyen de le faire disparaître ! Le lien est positionné sous la table des matières afin de pouvoir être visible.

Cette première étape est réussie : on arrive à afficher et masquer le calque opaque grâce aux liens et à leurs ancres. Néanmoins, on commence à comprendre les problèmes auxquels on va être confrontés concernant le contenu.

On se rend compte avec l'exemple précédent que l'on va être confronté à un problème conceptuel.
En effet, étant donné que l'apparition de la fenêtre modale se fait lors du clic sur un lien, le message à afficher devra être à l'intérieur du balisage du masque, car un lien ne peut avoir qu'une seule cible. Or l'opacité d'un élément est transmise à tous ses enfants. Ce qui fait que le message sera lui aussi opaque, ce qui n'est pas acceptable en termes d'ergonomie.

En JavaScript, la solution est simple : on crée deux éléments distincts, le masque et la fenêtre. On positionne le masque par-dessus la page puis la fenêtre par-dessus le masque, ainsi, la fenêtre contenant le message n'étant pas enfant du masque, elle n'en hérite pas la transparence.

Nous avons vu que cette façon de procéder n'est pas réalisable en CSS car il est impossible de faire afficher deux éléments distincts avec :target.

Là encore, CSS 3 va nous permettre de contourner le problème.
Si l'opacité est transmise aux balises enfants, nous allons donc la gérer au niveau de la couleur de fond en utilisant le mode rgba.

Le mode rgba est une façon de définir une couleur apparue avec CSS 3. Elle reprend ce qui existait avec rgb (red, green, blue) en ajoutant un paramètre alpha correspondant à la transparence.
Pour plus de détails, vous pouvez consulter l'article de Jérôme Debray : Comprendre les couleurs en CSS3.

L'exemple précédent devient alors :

#overlay2{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
#overlay2:target{
    display: block;
}
#overlay2 a{
    font-weight: bold;
    padding: 10px 25px;
    background-color: white;
    position: absolute;
    top: 25%;
    left: 50px;
}

<div id="overlay2"><a href="#noWhere">Supprimer le masque</a></div>
<p><a href="#overlay2">Afficher le masque</a></p>

Afficher le masque

On constate que maintenant, le masque est toujours opaque, mais que son contenu est correctement affiché.

Il ne reste donc plus qu'à donner un peu de style à la fenêtre contenant le message.
Le style de la fenêtre est repris de l'article Créez une fenêtre modale avec CSS et jQuery.

#overlay3{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
#overlay3:target{
    display: block;
}
.popup_block{
    background: #fff;
    padding: 20px;
    border: 20px solid #ddd;
    position: relative;
    margin: 10% auto;
    width: 40%;
    box-shadow: 0px 0px 20px #000;
    border-radius: 10px;
}
img.btn_close {
    float: right;
    margin: -55px -55px 0 0;
}

<div id="overlay3">
    <div class="popup_block">
        <a class="close" href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="./images/close_pop.png"></a>
        <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./images/bomber.gif">
        <h2>Popup</h2>

        <p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p>
        <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
        
    </div>
</div>
<p><a href="#overlay3">Afficher le masque</a></p>

Popup

Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo.

Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.

Afficher la fenêtre modale

La pseudoclasse :checked permet de cibler des boutons radio ou des cases à cocher en fonction de leur état.
Son utilisation peut être visualisée dans l'exemple suivant :

.checkbox:checked{
    box-shadow: 0 0 10px 2px gold;
}

Cocher la case pour modifier son apparence :

Vous pouvez constater qu'en cochant ou décochant la case, son contour est modifié.
En tant que telle, cette pseudoclasse ne nous sera pas particulièrement utile puisqu'elle ne permet pas de cibler d'autres éléments que les balises <input /> correspondantes. Il va donc falloir la coupler avec un autre sélecteur pour pouvoir s'en servir efficacement pour notre fenêtre modale.

En règle générale, CSS permet de cibler un élément par rapport à ses parents successifs : la recherche se fait en avançant progressivement dans l'arborescence HTML. Ce qui ne nous est pas très utile puisqu'une balise <input /> ne peut pas avoir d'enfant.
Heureusement, il existe malgré tout certains sélecteurs permettant la recherche sur le même niveau. Dans cet exemple, nous utiliserons le sélecteur de frère adjacent E + F.

Ce sélecteur permet de cibler tout élément F frère (c'est-à-dire au même niveau de l'arborescence, ou ayant le même parent) de l'élément E.

Cette particularité va avoir pour conséquence d'imposer une structure HTML figée, alors que l'exemple précédent est plus souple sur ce point.

À partir de ces informations, nous allons pouvoir élaborer une ébauche de structure pour notre fenêtre modale.

#overlay4{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
#modalCheck4{
    position: relative;
    z-index: 1001;
}
#modalCheck4:checked + #overlay4{
    display: block;
}

<div>
    <label for="modalCheck4">Cliquer pour afficher le masque : </label><input type="checkbox" id="modalCheck4" />
    <div id="overlay4">
    </div>
</div>

Dans cet exemple, nous avons rajouté un positionnement et un z-index à la case à cocher afin de la mettre au premier plan et de permettre de la décocher.

Pour que l'exemple précédent soit opérationnel, nous sommes obligés de positionner la case à cocher en premier plan pour permettre de la décocher. Or dans l'absolu, c'est plutôt le contraire que l'on souhaiterait faire : que la case ne soit jamais visible !
Nous allons contourner cette obligation en utilisant la balise <label>, qui permet d'associer son contenu à la balise <input /> et de cocher cette dernière lorsque l'on clique dessus, ce qui va nous permettre de masquer la case à cocher.
D'autre part, plusieurs balises <label> peuvent être associées au même élément.

Nous adaptons donc notre exemple pour prendre en compte ces informations :

#overlay5{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
#modalCheck5{
    display: none;
}
#modalCheck5:checked + #overlay5{
    display: block;
}
label{
    cursor: pointer;
}
.labelButton{
    border: 1px solid black;
    padding: 5px 10px;
    background-color: white;
    position: absolute;
    top: 25%;
    left: 50px;
}

<div>
    <label class="lienArticle simple" for="modalCheck5">Cliquer pour afficher le masque</label><input type="checkbox" id="modalCheck5" />
    <div id="overlay5">
        <label class="labelButton" for="modalCheck5">Cliquer pour supprimer le masque</label>
    </div>
</div>

Le résultat correspond à nos attentes. Il ne reste plus qu'à ajouter du contenu à la fenêtre modale avec le même code que dans la partie précédente.

#overlay6{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
#modalCheck6{
    display: none;
}
#modalCheck6:checked + #overlay6{
    display: block;
}

<div>
    <label for="modalCheck6">Voir la fenêtre modale</label><input type="checkbox" id="modalCheck6" />
    <div id="overlay6">
        <div class="popup_block">
            <label for="modalCheck6"><img alt="Fermer" title="Fermer la fenêtre" class="my_btn_close" src="./images/close_pop.png" /></label>
            <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./images/bomber.gif" />
            <h2>Popup</h2>

            <p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p>
            <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>

        </div>
    </div>
</div>

Voir la fenêtre modale

Popup

Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo.

Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.

Attention, cette technique possède les mêmes contraintes que la précédente en termes de compatibilité. Elle ne fonctionnera pas avec les versions d'Internet Explorer inférieures à 9.