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.