Ouvrir une popup avec une checkbox

**Eddoul** · 06/04/2017, 19h27

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

**NoSmoking** · 09/04/2017, 09h13

Bonjour,

Que dois-je modifier ?

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

**Eddoul** · 09/04/2017, 22h17

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

Code html :

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
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>

**NoSmoking** · 10/04/2017, 13h22

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 html :

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
<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>

**Eddoul** · 11/04/2017, 04h52

'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 :

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
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.

**JefReb** · 11/04/2017, 08h35

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

Code html :

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
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>

**NoSmoking** · 11/04/2017, 19h15

Cela fonctionne très bien si tu clique sur Formation N1 qui est le contenu du <label for="modalCheck6">: Formation N1</label>

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#modalCheck6 {
    display: none;
}

Ouvrir une popup avec une checkbox

CSS

Discussions similaires

Partager

Partager