Bonjour à tous et à toute,

J'ai récemment trouver un code javascript qui permet d'ouvrir une sorte de "pop up" sur la page de mon site via un clique. Une fois que j'ai lancer la fonction, je dois cliquer sur le "pop up" n'importe ou pour arrêter la fonction. Mon problème est que je veux introduire des formulaire de texte dans cette "pop up" et quand je clique pour sélectionner la zone de texte, la fonction détecte un clique et ferme le "pop up". J'ai essayer de modifier d’événement dans la fonction comme par exemple un double clique mais sa créer un bug et la fonction ne ce ferme pas. Il n'y a que l'événement Onclick qui fonctionne. Auriez-vous une solution pour remplacer le Onclick par un Ondblclick ?

Voici mon code JS :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var IsIE=!!document.all, calque, essai, timer;
window.onload = function(){
	calque = document.getElementById('overlay');
	var calqueY = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	var calqueX = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	calque.style.width = Math.max(document.body.offsetWidth, calqueY) + 'px';
	calque.style.height = Math.max(document.body.offsetHeight, calqueX) + 'px';
	if(IsIE){
		calque.style.filter='alpha(opacity=0)';
		calque.filters[0].opacity=0;
	}
	else{
		calque.style.opacity=0;
	}
}
function creer_message(elt, texte){
	var i=0;
	essai = elt.cloneNode(true);
	essai.id = 'ajout';
	essai.innerHTML = texte;
	document.body.appendChild(essai);
	if(IsIE){
		essai.style.filter='alpha(opacity=0)';
		essai.filters[0].opacity=0;
	}
	else{
		essai.style.opacity=0;
	}
	calque.style.display = 'block';
	essai.style.display = 'block';
	timer = setInterval(function(){
		if(i==100){
			clearInterval(timer);
			timer = false;
			essai.getElementById('body_info').removeAttribute('ondblclick');
		}
		else{
			if(IsIE){
				calque.filters[0].opacity = i*0.75;
				essai.filters[0].opacity = i;
			}
			else{
				calque.style.opacity=(i/100)*0.75;
				essai.style.opacity=i/100;
			}
			i=Math.min(i+5, 100);
		}
	}, 1);
}
function fin(){
	var i=100;
	if(!timer){
		timer = setInterval(function(){
			if(i==0){
				clearInterval(timer);
				calque.style.display = 'none';
				document.body.removeChild(document.getElementById('ajout'));
			}
			else{
				if(IsIE){
					calque.filters[0].opacity = i*0.75;
					essai.filters[0].opacity = i;
				}
				else{
					calque.style.opacity=(i/100)*0.75;
					essai.style.opacity = i/100;
				}
				i = Math.max(i-5,0);
			}
		}, 1);
	}
}
Voici mon code 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
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
55
56
57
58
 
body{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px;
}
.info, .success, .warning, .error, .validation {
	border: 1px solid;
	margin: 10px 0px;
	padding:15px 40px 25px 50px;
	background-repeat: no-repeat;
	background-position: 20px center;
	cursor: pointer;
}
.info {
	font-size:1.5em;
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('info.png');
}
.success {
	font-size:1.5em;
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('success.png');
}
.warning {
	font-size:1.5em;
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('warning.png');
}
.error {
	font-size:1.5em;
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('error.png');
}
#overlay{
	background-color: black;
	position: absolute;
	margin :0;
	padding : 0;
	top: 0;
	left: 0;
	display : none;
	overflow : hidden;
}
#ajout{
	position: absolute;
	top: 100px;
	left: 24%;
	display:block;
	text-align:center;
	width: 50em;
	height:10em;
	display: none;
}
</style>

Voici mon 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
14
15
<html>
<body>
    <h1>Boîtes de message personnalisées.</h1>
	<div style="" class="info" onclick="creer_message(this, 'Ceci est un message d\'information.')">
		Cliquez ici pour afficher un message d'information.</div>
	<div style="" class="success" onclick="creer_message(this, 'Ceci est un message de réussite personnalisé.')">
        Cliquez ici pour afficher un message de réussite personnalisé.</div>
    <div style="" class="warning" onclick="creer_message(this, 'Ceci est un message d\'alerte personnalisé.')">
        Cliquez ici pour afficher un message d'alerte personnalisé.</div>
    <div style="" class="error" onclick="creer_message(this, 'Ceci est un message d\'erreur personnalisé.')">
        Cliquez ici pour afficher un message d'erreur personnalisé.</div>
	<div id="overlay"></div>
 
</body>
</html>


Merci de m'aider,
CrazyTermi.