Ouvrir une popup avec une checkbox

Version imprimable

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:

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:

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:

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:

<p><a href="#overlay3">Afficher le masque</a></p>

Que dois-je modifier ?

Merci pour votre aide

09/04/2017, 09h13
NoSmoking

Bonjour,

Citation:

Que dois-je modifier ?

rien, il suffit de lire le tuto jusqu'au § Autre méthode !

j'avais déjà fait ceci mais ça marche uniquement en cliquant sur le texte mais pas sur la checkbox

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
	<label> Niveaux autorisés : </label>
 
    <label for="modalCheck6">
   		 <?php 
                        if ($N0) 
                                echo "<br><input type='checkbox' name='N0' id='modalCheck6' checked>";
                        else {
                                echo "<br><input type='checkbox' name='N0' >";
                        }
                ?>
		: Formation N1</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 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>

Le sélecteur d'enfant adjacent + s'applique si les enfants, même parent, se suivent immédiatement donc sans autres éléments entre eux.

Dans ton code tu as des éléments parasites, deux fois ta checkbox par exemple.

Essaies donc plutôt avec ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<label> Niveaux autorisés : </label>
<label for="modalCheck6">: Formation N1</label>
<?php 
    if ($N0) 
        echo "<br><input type='checkbox' name='N0' id='modalCheck6' checked>";
    else {
        echo "<br><input type='checkbox' name='N0' >";
    }
?>
<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 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>

'tain, je ne comprends ce qui ne marche pas. Pourtant, j'ai fait un copier/coller de ton bout de code.
J'ai créé une page minimaliste, juste avec ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<style>	
		#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;
		}
		.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;
}
</style>
 
 
		<label> Niveaux autorisés : </label><br>
		<label for="modalCheck6">: Formation N1</label><input type='checkbox' name='N0' 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 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>

c'est testable ici :
http://scf-test.legtux.org/core/pages/_page_test.php
il n'y a pas la case à cocher.

Sans vouloir m'avancer mais en supprimant id='modalCheck6' de <input>, ça marche

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html>
<head>
<style>
#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;
}
.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;
}
</style>
</head>
<body>
<label> Niveaux autorisés : </label><br>
		<label for="modalCheck6">: Formation N1</label>
        <input type='checkbox' name='N0' >
		<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 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>
</body>
</html>

11/04/2017, 19h15
NoSmoking
Cela fonctionne très bien si tu clique sur Formation N1 qui est le contenu du <label for="modalCheck6">: Formation N1</label>

Citation:

Envoyé par Eddoul

il n'y a pas la case à cocher.

normal ton contrôle est en display:none, c'est un peu le but de cette technique.
Code:

1 2 3 #modalCheck6 { display: none; }