Bonjour,

Je voudrais afficher une popup modal quand on clique sur un checkbox.

J'ai pris exemple sur ce site : http://dmouronval.developpez.com/tut...-css3/#noWhere

ça fonctionne bien mais sur un lien, pas sur la checkbox

Voici ma checkbox :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
if ($N0) 
	echo "<br><input type='checkbox' name='N0' checked> : Formation N1";
else {
	echo "<br><input type='checkbox' name='N0' > : Formation N1";
}

je pense qu'il doit avoir une histoire de id, mais quand je mets l'id, la checkbox est cachée.

Voici mon css :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
		#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;
		}

voici le code html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<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 id='msgerreur'>ATTENTION</h2>
 
        <p>
        Tu es sur le point d'autoriser un débutant sans diplôme à participer à cette plongée.<br>
        Si tu le désires pas, merci de décocher la case correspondante à la formation N1
        </p>
 
    </div>
</div>

quand je mets avec un lien, ça marche nickel :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<p><a href="#overlay3">Afficher le masque</a></p>


Que dois-je modifier ?

Merci pour votre aide