Propagation du onclick

**Titum** · 05/09/2012, 14h43

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 :

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

**SpaceFrog** · 05/09/2012, 14h52

cf cancelBubble() et stopPropagation()

**Titum** · 05/09/2012, 16h13

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 :

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

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

**Willpower** · 05/09/2012, 17h47

une autre solution, c'est de gérer ton html différement :

remplacer ça :

Code html :

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

1
2
3
<div id="winmodal" onclick="modalHide()">
    <div id="modalin"></div>
</div>

par ça :

Code html :

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

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.

**Titum** · 05/09/2012, 20h22

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

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 :

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

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

**NoSmoking** · 05/09/2012, 22h55

Bonsoir,

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.

Si je peux centrer mon div sans le mettre dans un conteneur je suis bon

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

**Willpower** · 05/09/2012, 23h57

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

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 :

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

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.

Propagation du onclick

JavaScript

Vue hybride

Discussions similaires

Partager

Partager