[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

Vue hybride

Discussions similaires

Partager

Partager