[debutant] Personalisation du confirm()

Version imprimable

06/05/2005, 17h03
glanumf

[debutant] Personalisation du confirm()

salut,
Alors je suis debutant en Javascript, et je suis actuelement en stage et mon tuteur me demande de personalisé un peu les message-box..
Je m'explique, il veut qu'a la place de "OK" il y ait "OUI", a la place de "Annuler", il y est "NON" et changer le nom de la petite fenétre ( du confirm() )
J'aimerai savoir si c'est possible, j'ai un peu cherché, et ayant rien trouver, j'imajine que c'est impossible, mais dans le benefice du doute je vous pose la question...

Au pire je pourai toujours faire un pop-up, mais bon, c'est juste pour une verification...

Merci d'avance pour votre aide
06/05/2005, 17h35
javatwister

salut

sympa le tuteur!

En fait, passe plutôt par un contenru html que tu rends visible au moment voulu: il constituera le rectangle d'affichage; ce cadre contiendra lui-même les options que tu souhaites (boutons "oui / non"k, texte, icônes...);

mais il faut bcp bosser les détails pour que le comportement soit comparable à cleui d'un confirm()
09/05/2005, 09h15
Matthieu2000

Citation:

Envoyé par javatwister

sympa le tuteur!

+1
PS : essaie de changer de maître de stage ...

une ebauche:

Code:

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>

09/05/2005, 09h57
simone.51

Attention tout de meme avec les positions absolues...
IE et FireFox n'ont pas tout à fait la meme notion des distances :lol:
09/05/2005, 14h41
glanumf

Merci a tous pour ces conseils ^_^

Ca a pas l'air mal ta solut SpaceFrog. Bon je l'ai montré ca vite fait a mon tuteur, il est moyen chaud quand même, il trouve que ca fait beaucoup de ligne de code pour pas grand chose, disons que la critique est plus contre le javascript. En fait il imaginait plus un truc du genre des paramêtres a rajouer a la fonction confirm(). C'est vrai que ca doit pas etre grand chose quand même. Mais bon, je vais essayer quand même de developper ta solution un petit peu plus, SpaceFrog. Au moin pour tester
Merci beaucoup à tous.
:merci:

Bon si vous avez d'autres idées je suis tjs preneur, mais je le met en resolu quand même...
09/05/2005, 15h53
Oluha

Perso je ne vois pas d'autre solution

Citation:

disons que la critique est plus contre le javascript

de toutes façons, confirm() c'est du javascript alors ca change pas grand chose...

alors j'ai un petit peu modifier ton code SpaceFrog, histoire d'etre un petit peu plus souple, et comme tu as dit ta version etait une ébauche :):

le CSS:

Code:

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
 
.titlebar{
		font-size:11px;
        font-family:verdana;
        color:white;
		font-weight:bold;
        width:98%;
        background-color:#0000CC;
        padding:4px;
        text-align:left;
        }
 
.msgbox{
		border:outset 2px white;
		background-color:#D6D6D6;
		width:30%;
		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:#D6D6D6;
		left:2px;
		width:10px;
		color:#999999;
		font-family:tahoma;
		float:right;
		margin-top:0px;
		padding-left:4px;
		padding-bottom:2px;
		padding-top:1px;
		top:0px;
		line-height:9px;
		cursor:default;
		}
.bouton{
		width:80px;
		height:25px;
		position:relative;
		font-size:11px;
		font-family: tahoma;
		}
 
.innerText{
		width:100%;
		text-align:center;
		}      
 
#testzone {
		position:absolute;
		top:20%;
		left:20%;
		}

L'html:

Code:

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
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<link rel="stylesheet" href="mesage_box_test.css" type="text/css">
</head>
 
<body>
<input type="button" onclick="document.getElementById('testzone').style.display='block';" value="test de la fenètre"/>
 
<div id='testzone' class="msgbox" style="display:none;" >
 <div class="titlebar">
  <div class="cross">X</div> Title
 </div>
<br/>
<br/>
<div class='innerText'>
Pour poursuivre veuillez répondre à cette question:
Avez vous une toute petite boite ?
</div>
<br/>
<br/>
<div>
<input type="button" id="trap1" value="OUI" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:0px;"/>
 
<input type="button" id="trap2" value="NON" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:5px;"/>
 
</div>
<br/>
</div>
 
</body>
 
</html>

En esperant que ca serve a quelqu'un d'autre.
Par rapport a ta version j'ai pas changer grand chose en fait:
- J'ai fait une taille de fenètre dynamique
- j'ai enlevé la hauteur de la fenetre qui creer un bug d'affichage sur IE (dans .msgbox)
- J'ai du metre et enlevé un ou deux <br/>

Voila. Et encore Merci.