Discussion :

[CrazyTermi]

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.

[sekaijin]

supprime la fonction de fermeture sur l'événement onclick

et ferme la fenêtre lorsque le formulaire lors d'un click sur un bouton du formulaire.

A+JYT

[CrazyTermi]

Il y a un bug, lorsque j'essaye de fermer la page après, elle réa-parait tout de suite

voici un lien pour tester le code :
http://kingdomoffreedom.crystal-serv.com/test/modal.php

[NoSmoking]

Bonjour,
attention tu clone l'élément sur lequel tu cliques, essai = elt.cloneNode(true), les événements sont également repris donc le comportement est logique.

Il te faut redéfinir la fonction sur le onclick, par exemple essai.onclick= function(){fin()}, ou encore simplement essai.onclick= fin.

Au passage, un <!doctype html> n'a jamais fait de mal à personne, bien au contraire

[CrazyTermi]

D'accord merci pour vos réponses Mais il y a toujours mon problème de départ qui est que quand je met des champs input text dans cette "pop up", et que l'on effectue un clique dessus, la fonction détecte le click et aussi tot ferme cette "pop up" automatiquement. J'aimerais changer l'événement onclick par ondblclick pour devoir faire un double clique pour fermer la page ou lieu d'un seul. J'ai tenter plusieurs fois de modifier ce code, mais je n'y suis pas arriver.

Je précise que je suis vraiment une quiche en Javascript :/
Pouvez-vous encore m'aider svp

[NoSmoking]

...input text dans cette "pop up",...

Non! c'est une popin.

J'aimerais changer l'événement onclick par ondblclick pour devoir...

cela n'est pas forcément une bonne solution.

Dans ton cas il faut intercepter l'objet ayant était cliqué et faire le traitement en conséquence.
Pour plus d'info : Présentation des évènements du DOM

Petit exemple qui peux t'aider à comprendre

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Cliquez moi!]</title>
<style>
#la_forme {
  width:25em;
  margin:0 auto;
  padding:1em;
  border:1px solid #CCC;
  text-align:center;
  background:#EEE;
}
form {
  background:#DDD;
  padding:1em;
}
p {
  background:#CCC;
}
label {
  background:#FFF;
}
</style>
</head>
<body>
  <div id="la_forme">
    <form method="post">
      <p><label for="adresse">Votre email</label></p>
      <p><input id="adresse" type="email" size="20" name="email" autofocus required></p>
      <p><input type="submit" value="Envoyer"></p>
    </form>
  </div>
  <div id="info_event"></div>
<script>
var oDiv = document.getElementById('la_forme'),
    oInfo= document.getElementById('info_event');
 
oDiv.onclick = function(e){
  e = e||window.event;
  var oSrc = e.target || e.srcElement;
  oInfo.innerHTML += 'clic sur balise &lt;' +oSrc.tagName + '&gt;<br>';
  return false;
}
</script>
</body>
</html>

Je précise que je suis vraiment une quiche en Javascript :/

cela ne doit pas être une fatalité