[debutant] Personalisation du confirm()

**glanumf** · 06/05/2005, 17h03

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

**javatwister** · 06/05/2005, 17h35

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()

**Matthieu2000** · 09/05/2005, 09h15

Envoyé par javatwister

sympa le tuteur!

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

**SpaceFrog** · 09/05/2005, 09h30

une ebauche:

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>

**simone.51** · 09/05/2005, 09h57

Attention tout de meme avec les positions absolues...
IE et FireFox n'ont pas tout à fait la meme notion des distances

**glanumf** · 09/05/2005, 14h41

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.

Bon si vous avez d'autres idées je suis tjs preneur, mais je le met en resolu quand même...

**Oluha** · 09/05/2005, 15h53

Perso je ne vois pas d'autre solution

disons que la critique est plus contre le javascript

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

**glanumf** · 09/05/2005, 16h10

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 :

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
 
.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 :

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
 
<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.

[debutant] Personalisation du confirm()

JavaScript

Discussions similaires

Partager

Partager