Alert() personnalisé

Invité · 07/09/2005, 15h05

Bonjour à tous,

Je suis sur que nombre d'entre vous ont déjà été confronté à un problème similaire.

Je voudrais changer le texte des boutons de ma popup alert.

Je sais que ce n'est pas possible en utilisant la fonction alert, mais par contre, c'est possible en ouvrant une nouvelle fenêtre, en la redimensionnant, et en y disposant des boutons. Après, je ne sais pas trop si c'est possible de récupérer quel bouton à été cliqué, mais je pense que oui.

A mon avis, il y a déjà des gens qui ont fait quelque chose de similaire (genre une boite de dialog à 3 boutons).

Si quelqu'un sait ou je peux trouver un exemple assez proche, ça serait sympa de me le montrer.

Merci à vous, bonne journée.

**KiLVaiDeN** · 07/09/2005, 15h20

Salut,

Oui c'est possible, nous l'avons fait pour un projet.

Par contre je suis désolé je n'ai pas le code sous la main. J'ai juste le principe en tête : ta popup contient les boutons, et chacun de ces boutons déclenche une fonction de la page appellante, ainsi qu'un window.close().

**SpaceFrog** · 07/09/2005, 15h23

domage de passer par une popup pour si peu...

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
.titlebar{font-size:11px;
		  font-family:verdana;
		  color:white;
		  font-weight:bold;
		  width:100%;
		  background-color:Darkslateblue;
		  padding:2px;
		  text-align:left;
		  }
 
.msgbox{border:outset 2px white;
		 background-color:gainsboro;
		 width:300px;
		 height:180px;
		 color:black;
		 padding-left:1px;
		 padding-right:2px;
		 padding-top:1px;
		 font-family: verdana;
		 font-size:11px;
		 text-align:center
			 }
.cross{border:outset 2px white;
		 background-color:gainsboro;
		 left:2px;
		 width:18px;
		 color:black;
 	     font-family:tahoma;
 	     float:right;
 	     margin-top:0px;
 	     padding-left:4px;
 	     padding-bottom:2px;
 	     padding-top:1px;
 	     top:0px;
 	     line-height:10px;
 	     cursor:default;
 	     }
.bouton{width:80px;
		 height:25px;
		 border:oustet 2px silver;
		 position:relative;
		 font-size:11px;
		 font-family: tahoma;
		 }
 
.innerText{width:100%;
			padding-left:30px;
			text-align:left;
			}		 
 
#testzone {position:absolute;
           top:100px;
           left:200px;
           }
</style>
 
 
</head>
 
<body>
<input type="button" onclick="document.getElementById('testzone').style.display='block';" value="alert"/>
<div id='testzone' class="msgbox" style="display:none;" > 
 <div class="titlebar">
  <div class="cross">X</div> Title
 </div>
 
<br/>
<br/>
<br/>
<div class='innerText'>
Pour poursuivre veuillez répondre à cette question: 
Avez vous une toute petite boite ?
</div>
<br/>
<br/>
<br/>
<div>
<input type="button" id="trap" value="OUI" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:0px;"/>
 
<input type="button" id="trap" value="NON" class="bouton" style="left:5px;"/>
</div>
 
</div>
 
</body>
 
</html>

**KiLVaiDeN** · 07/09/2005, 15h32

Salut spacefrog, n'y-a-t'il pas de problèmes liés aux boutons de type <input> dans des div ? J'avais eu une mauvaise expérience la dessus.

**SpaceFrog** · 07/09/2005, 15h36

je n'ai pas encore eu de soucis de ce genre... mais on peut toujours mettre des boutons (img) à la place ...

**KiLVaiDeN** · 07/09/2005, 15h41

Faudrait que je reteste avec les nouveaux navigateurs, j'avais eu des soucis de superpositions avec les anciennes versions

Donc de base j'avais bani cette solution pour tout ce qui est évènements liés à un formulaire, je ne me sers des div que pour de l'informatif, mais finalement ta méthode me parrait la meilleure pour ce problème

Invité · 07/09/2005, 15h55

Salut,

J'ai testé la solution avec CSS.

C'est sympa, mais celà ne me convient pas, car ce n'est pas une vrai popup (non redimensionnable, il semble que l'on ai accès au reste de la page, donc aux liens (non? - de toute façon, me direz vous, ça sera pareil si j'ouvre une autre fenêtre), pas le style du navigateur client si il l'a changé, et pas exactement comme une popup (d'ailleurs, sous firefox, le texte déborde).

Je pense que mon client (qui veut un site fonctionnel sous IE) se satisfera d'un (OK, Annuler) car je pense que la solution avec une nouvelle fenêtre ne lui plaira pas (à moins qu'on ne voit pas la différence et que l'on puisse bloquer le focus dessus).

**KiLVaiDeN** · 07/09/2005, 16h01

Non tu ne pourras pas bloquer le focus, pas autant que je le sache. Tu peux par contre bloquer les actions du formulaire appellant, tant que la popup est ouverte, mais après ça devient une usine à gaz javascript

Et qui dit usine à gaz en JS, dit _non compatible sur tous les navigateurs_ ( même si avec beaucoup d'effort il est possible de faire quelque chose qui marche dans la plupart des cas )

Autant rester donc à ton confirm(), ça marche bien dans la plupart des cas et c'est ultra simple à coder

Une autre solution, consiste à avoir une zone cachée, et lorsqu'une action de type validation est effectuée, elle apparrait en offrant les différents choix, dont la vrai validation. Ca attire bien l'attention, sans faire le petit bruit "popup" *ding* qui peut être stressant

Bon courage

**SpaceFrog** · 07/09/2005, 16h53

tu peux toujours empecher la souris de sortir du div... mais bon ...

par contre même avec un popup tu peux perdre le focus ...

peut être avec un showModalDialog ?

Alert() personnalisé

JavaScript

Discussions similaires

Partager

Partager