Propagation du onclick

Version imprimable

Bonjour,
mon titre n'est peut-être pas très clair : j'affiche une fenêtre modale et je veux qu'elle se ferme si on clique en DEHORS de la fenêtre.
Mon système de fenêtre est très simple :
- un conteneur (div "winmodal") qui prend toute la page et sur lequel j'ai mis mon évènement onclick.
- un div dans le conteneur centré dans la page ("modalin") : JE NE VEUX PAS que la fenêtre se ferme quand on clique dans ce div (car j'y mets des formulaires et au moindre clique sur un select tout se ferme !!)

Voilà un condensé de ma page :
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 lang="fr"> <head> <script> document.write('<div id="winmodal" onclick="modalHide()"><div id="modalin"></div></div>'); var modalclose = '<div id="modalclose" onclick="modalHide()"><img src="img/winmodalclose.png" width="30" height="30"></div>'; function modalShow(modalPage){ document.getElementById('winmodal').style.display = 'block'; document.getElementById('winmodal').style.visibility = 'visible'; document.getElementById('modalin').innerHTML = modalclose+' un contenu chargé par Ajax'; } function modalHide(){ document.getElementById('winmodal').style.display = 'none'; document.getElementById('winmodal').style.visibility = 'hidden'; } </script> <body onload="modalShow('mapage')"> <style> #winmodal { position:fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(68, 68, 68, .75); text-align:center; z-index:30; display:none; visibility:hidden; } #modalin { position:relative; top:35%; width:400px; height:300px; background-color:#fff; border:10px solid #ccc; display:inline-block; padding:10px; border-radius:10px; text-align:left; } #modalclose { float: right; margin: -35px -35px 0 0; } </style> blablabla </body> </html>
Si vous avez une petite idée, je suis preneur ! Merci.

05/09/2012, 14h52
SpaceFrog

cf cancelBubble() et stopPropagation()
05/09/2012, 16h13
Titum
j'ai bien une petite fonction d'arrêt de propagation mais je ne vois pas bien où l'insérer.
Surtout que j'ai quand même un bouton pour fermer la fenêtre ("modalclose") à l'intérieur de cette même fenêtre
Code:

1 2 3 4 5 6 7 function freezeEvent(e) { if (e.preventDefault) e.preventDefault(); e.returnValue = false; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); return false; }
05/09/2012, 17h47
Willpower
une autre solution, c'est de gérer ton html différement :

remplacer ça :
Code:

1 2 3 <div id="winmodal" onclick="modalHide()"> <div id="modalin"></div> </div>
par ça :
Code:

1 2 <div id="winmodal" onclick="modalHide()"></div> <div id="modalin"></div>
tu dois évidement arranger ton style pour garder ton visuel, mais ainsi il n'y aura pas de propagation. ;)
05/09/2012, 20h22
Titum
j'y ai pensé mais j'ai besoin d'un conteneur faisant 100% de la page (winmodal, le fond) pour centrer horizontalement le popup (modalin).

Si je peux centrer mon div sans le mettre dans un conteneur je suis bon :D mais je n'ai pas de solution pour ça :(.

J'ai tenté de mettre un div sur toute la page en-dessous sur lequel mettre le onclick
Code:

1 2 3 4 <div id="dessous" onclick="modalHide()">pour griser la page +</div> <div id="winmodal" onclick="modalHide()"> <div id="modalin"></div> </div>
Mais comme winmodal est obligé d'être par-dessus, je ne peux pas cliquer sur le div "dessous" !

Bonsoir,

Citation:

j'y ai pensé mais j'ai besoin d'un conteneur faisant 100% de la page (winmodal, le fond) pour centrer horizontalement le popup (modalin).

ce n'est pas une obligation.

Citation:

Si je peux centrer mon div sans le mettre dans un conteneur je suis bon :D mais je n'ai pas de solution pour ça :(.

la position:absolute par rapport au document peut être la solution.

Sinon avec cancelBubble() et stopPropagation() tu devrais y arriver les mettant sur la DIV id="modalin" et sur son événement onclick.

Une approche...
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 53 54 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>[Stop Event]</title> <style> html, body{ height:100%; width:100%; margin:0; padding:0; } #main{ width:100%; top:0; min-height:100%; margin:0; padding-top:5%; background-color:#f0f0f0; } #modal{ position:absolute; width:500px; height:500px; left:50%; top:50%; margin:-250px; background-color:#E1E4F2; } select{ margin:50px; } </style> </head> <body> <div id="main"> <div id="modal"> <select> <option>option #1</option> <option>option #2</option> <option>option #3</option> </select> </div> </div> <script> document.getElementById('main').onclick = function(e){ document.getElementById('modal').style.display='none'; }; document.getElementById('modal').onclick = function(e){ e ? e.stopPropagation() : (window.event.cancelBubble = true); }; </script> </body> </html>
le CSS présente un patchwork de ce que tu peux utiliser.

05/09/2012, 23h57
Willpower
Citation:
Envoyé par Titum

j'y ai pensé mais j'ai besoin d'un conteneur faisant 100% de la page (winmodal, le fond) pour centrer horizontalement le popup (modalin).

Si je peux centrer mon div sans le mettre dans un conteneur je suis bon :D mais je n'ai pas de solution pour ça :(.

J'ai tenté de mettre un div sur toute la page en-dessous sur lequel mettre le onclick

Code:

1 2 3 4 <div id="dessous" onclick="modalHide()">pour griser la page +</div> <div id="winmodal" onclick="modalHide()"> <div id="modalin"></div> </div>

Mais comme winmodal est obligé d'être par-dessus, je ne peux pas cliquer sur le div "dessous" !
et en mettant "modalHide" en height=1px (ou 0) et overflow=visible, ça devrait le faire sans trop de prise de tête pour le centrage, non ?

mais bon, peut-être que la solution javascript "stopPropagation" est plus propre. ;)

Salut sinon avec ton script sans trop de correction tu peux faire ça :

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
53
 
<!doctype html>
<html lang="fr">
<head>
 
<script>
document.write('<div id="winmodal" onclick="modalHide()"><div id="modalin"></div></div>');
var modalclose = '<div id="modalclose" onclick="modalHide()"><img src="img/winmodalclose.png" width="30" height="30"></div>';
function modalShow(modalPage){
	document.getElementById('winmodal').style.display = 'block';
	document.getElementById('modalin').innerHTML = modalclose+' un contenu chargé par Ajax';
}
function modalHide(){
	document.getElementById('winmodal').style.display = 'none';
}
function noEventClick(evt){
	evt?evt.stopPropagation():window.event.cancelBubble = true;
}
document.getElementById("modalin").setAttribute("onclick","noEventClick(event)");
</script>
<body onload="modalShow('mapage')">
 
<style>
#winmodal {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(68, 68, 68, .75);
	text-align:center;
	z-index:30;
	display:block;
}
#modalin {
	position:relative;
	top:35%;
	width:400px; 
	height:300px; 
	background-color:#fff;
	border:10px solid #ccc;
	display:inline-block;
	padding:10px;
	border-radius:10px;
	text-align:left;
}
#modalclose {
	float: right;
	margin: -35px -35px 0 0;
}
</style>
blablabla
</body>

06/09/2012, 11h35
Titum

Merci pour toutes vos réponses, j'y ai puisé de quoi faire fonctionner mon système comme voulu.

Entre sortir le div "modalin" avec du CSS à la NoSmoking et le gestionnaire d'évènement proposé par headmax, les solutions fonctionnent bien.

Merci beaucoup :ccool: