dialog confirm oui/non

**mourad.zamoun** · 28/09/2007, 13h09

peut on changer le texte OK/Cancel en OUI/NON dans la boite de dialog confirm ?

A++

**SpaceFrog** · 28/09/2007, 13h11

non
sauf à faire soi même une boite de dialogue

**mourad.zamoun** · 28/09/2007, 13h40

tu peux me donner un exemple ?

**SpaceFrog** · 28/09/2007, 13h57

Un petit exemple vite fait de bidouille perso...

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
94
95
96
97
98
99
100
101
102
103
104
<html>
 
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
   <title>X</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>
 
 <script type='text/javascript'>
   function MyAlert($texte){
 
            msg=$texte
            document.getElementById('testzonetext').innerHTML=document.getElementById('texte').value;
 
            document.getElementById('trap').value=document.getElementById('bouton').value;
            document.getElementById('menutitre').innerHTML=document.getElementById('titre').value
 
            document.getElementById('testzone').style.display='block';
            }      
 
    </script>
</head>
<body>
Titre        <input type="text" id='titre' size="20" maxlength="40" />
Texte        <input type="text" id='texte' size="20" maxlength="40" />
Bouton			<input type="text" id='bouton' size="20" maxlength="40" />
 
			  <input type="button" onclick="MyAlert();"	  value="alerte"/>       
 
 
		<div id='testzone' class="msgbox" style="display:none;" >
				<div class="titlebar" >
					<div id='menutitre' style="float:left"></div>	
				  	<div class="cross" onclick="document.getElementById('testzone').style.display='none';">X</div>
 				</div>
 
				<br/>
				<br/>
				<br/>
				<div class='innerText' id='testzonetext'>	</div>
				<br/>
				<br/>
				<br/>
				<div>
					<input type="button" id="trap" value="OK" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:0px;"/><br/>
				</div>
 
		</div>
</body>
</html>

Sinon tu peux passer par une librairie de type window prototype

**mourad.zamoun** · 28/09/2007, 14h26

ya des inconveniants:
-tu ne peux pas la faire bouger
-le focus n'est pas fixé sur elle
-on est obligé de traimballer ce gros code dans toutes les pages qui font appel a cette fonction !

et c'est quoi l'autre solution window prototype ?

merci en tout cas pour cette reponse

A+

**SpaceFrog** · 28/09/2007, 14h31

oui dans cet exemple succint la dialogbox est fixe...mais tous les poitn cotés peuvent se coder ... ça va encore augmenter la taille du code
Le code restera toujours moins important que celui d'une libraire complète comme window prototype :

http://prototype-window.xilinus.com/

**mourad.zamoun** · 28/09/2007, 16h51

j'ai du mal a l'utiliser
ca marche pas chez moi !!
et pourtant j'ai fait un copier/collé de leur exemples !!??

A+

**SpaceFrog** · 28/09/2007, 16h52

tu as téléchargé libraire ?

**mourad.zamoun** · 28/09/2007, 17h58

oui les deux : prototype et window

**badoress** · 01/10/2007, 16h27

salut,
est ce que vous avez reussi à mettre ca en oeuvre càd changer le texte OK/Cancel en OUI/NON dans la boite de dialog confirm
Merci

**mourad.zamoun** · 01/10/2007, 16h41

malheiteusement, NON !!

si tu as des idées nouvelles, je n'attend que ça

A++

**SpaceFrog** · 01/10/2007, 16h59

Dasn la doc c'est tout bien expliqué !

confirm(content, options)
ou alert ou infio
et dans les options :

okLabel Ok Ok button label
cancelLabel Cancel Cancel button label

**mourad.zamoun** · 01/10/2007, 17h16

j'ai appliqué la doc comme il le faut puisque j'ai pris un exemple avec copier/collé !

le probleme est que ca ne fonctionne pas correctement chez moi !

la boite de dialog se casse en plusieurs morceaux et s'affiche a l'interieur de la page !!??

A++

**SpaceFrog** · 01/10/2007, 17h18

tu as copié quel exemple ?

**mourad.zamoun** · 01/10/2007, 17h48

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
<script type="text/javascript" src="prototype.js"> </script>
<script type="text/javascript" src="window.js"> </script>
<link href="style.css" rel="stylesheet" type="text/css"/>
 
<style> #myDialogId .myButtonClass { padding:3px; font-size:20px; width:100px; } #myDialogId .ok_button { color:#2F2; } #myDialogId .cancel_button { color:#F88; } </style>
 
 
<script>
function clik(){
w = Dialog.confirm("mon texte", 
               {width:300, okLabel: "OUI", cancelLabel: "NON",
               id: "myDialogId",
               cancel:function(win) {return false;},
               ok:function(win) {return true;}
              });
}
</script>
 
<input type="button" value="confirm" 
onclick="clik()" 
>

**badoress** · 04/10/2007, 15h42

bonjour,

moi aussi j'ai appliqué la doc comme il le faut. mais mon problème c'est que si je clik sur l'un des bouttons on me génére l'erreur suivante:
debug is not defined

quand j'ai enlevé le debug dans la fonction function(win) je voi tres bien la boite confirm avec le style et tout mais sans utilité

càd le test ne passe pas si je clik sur les bouttons

**badoress** · 04/10/2007, 17h37

pour le problème de debug is not defined j'ai ajouter le fichier debug.js et ça resoud le problème mais tjr j'arrrive pas à reussir mes test càd le dialog.confirm ne me retourn rien

voici la fonction que j'execute lors d'un clik sur une image :

if(! Dialog.confirm("est ce que vous etes sure",
{width:300, okLabel: "oui",
width:300, cancelLabel: "non",
buttonClass: "buttons",
cancel:function(win){debug("cancel confirm panel");} ,
ok:function(win) {debug("cancel confirm panel"); return true;}
})
)
{
alert('success');
}
}

je voi bien la boite de confirm mais j'arrive pas à voir l'alert c'est etonant

càd que le test ne passe pas ???

**mourad.zamoun** · 05/10/2007, 16h19

le probleme est résolu ; mais d'une autre manière:

le code de ma popupOuiNon.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
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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Confirmation</title>
<style type="text/css">
.bouton{width:80px;
                 height:25px;
                 border:oustet 2px silver;
                 position:relative;
                 font-size:11px;
                 font-family: tahoma;
                 }
                 
</style>
 
<script type="text/javascript">
var gobjXDocument = null;
 
function oui(){
        window.returnValue = true;
        window.close();
}
function non(){
        window.returnValue=false;
        window.close();
} 
 
function afficheQuestion(){
        gobjXDocument = window.dialogArguments; 
        document.getElementById("question").innerHTML = gobjXDocument ; 
}
 
</script>
</head>
 
<body>
 
<form id="f0">
 
<center>
		<h3>
		<div id="question" > </div>
		</h3>
 
	<input type="button" value="OUI" onclick="oui()" class="bouton" style="left:0px;"/>
 
	<input type="button" value="NON" onclick="non()" class="bouton" style="left:5px;"/>
 
</center>
 
</form>
 
<script>
afficheQuestion();
</script>
 
</body>
 
</html>

-------------

le code de l'utilisation :

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
<script>
var resultConfirm=false;
function confimUse(obj, question) {
        document.getElementById("resultConfirm").innerHTML = "";
        var question = "my question ?";
        var result = window.showModalDialog("file:///P:/data/js/popupOuiNon.html", question, "status:no;help:no;scrollbars:yes;dialogHeight:200px;hotkeys:no;dialogWidth:400px;location:no;menubar:no;toolbar:no;screenX:100;screenY:50");
        document.getElementById("resultConfirm").innerHTML = result;
}
</script>
 
<form id="f0">
 
<input type="button" value="click" onclick="confimUse(this.form.resultConfirm, 'my question?')" />
 
<div id="resultConfirm"> </div>
 
</form>

Mourad

**badoress** · 10/10/2007, 18h36

tu peux maintenant résoudre ton problème tres simplement

just avec le Dialog.cofirm de la lib prototype window.tu peux te referer à cette discussion http://www.developpez.net/forums/sho...d.php?t=421853

**kendar75** · 10/10/2007, 23h09

mets ce code dans: monfichier.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
 
<SCRIPT LANGUAGE="JavaScript">
<!--
IE4 = document.all;
function newAlert(title,mess,icon,mods) {
   (IE4) ? makeMsgBox(title,mess,icons,0,0,mods) : alert(mess);
}
 
function newConfirm(title,mess,icon,defbut,mods) {
   if (IE4) {
      icon = (icon==0) ? 0 : 2;
      defbut = (defbut==0) ? 0 : 1;
      retVal = makeMsgBox(title,mess,icon,4,defbut,mods);
      retVal = (retVal==6);
   }
   else {
      retVal = confirm(mess);
   }
   return retVal;
}
 
function newPrompt(title,mess,def) {
   retVal = (IE4) ? makeInputBox(title,mess,def) : prompt(mess,def);
   return retVal;
}
 
function IEBox(title,mess,icon,buts,defbut,mods) {
   retVal = (IE4) ? makeMsgBox(title,mess,icon,buts,defbut,mods) : null;
   return retVal;
}
//-->
</SCRIPT>
 
<SCRIPT LANGUAGE="VBScript">
<!--
Function makeMsgBox(title,mess,icon,buts,defbut,mods)
   butVal = buts + (icon*16) + (defbut*256) + (mods*4096)
   makeMsgBox = MsgBox(mess,butVal,title)
End Function
 
Function makeInputBox(title,pr,def)
   makeInputBox = InputBox(pr,title,def)
End Function
-->
</SCRIPT>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
function ConfirmOuiNon(Titre, Question)
{
	var Titre, Question;
		myIntegerVariable = IEBox
		(
			Titre,
		    Question,
		    2,4,1,0)
 
			switch (myIntegerVariable) {
		 		case 6: // 'Yes'
		  	    	// statements to execute if Yes pressed
		      	return 1;
		      	break;
		 	  	case 7: // 'No'
		      		// statements to execute if No pressed
		      	return 0;
		      	break;
		}
}
//-->
</SCRIPT>

Ensuite tu apelle la fonction comme ceci sur un évènement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
            fucntion mafonction()
            {
                var QuestionTexte;
		QuestionTexte = 'Etes-vous certain de vouloir Oui/Non?';
 
		if (ConfirmOuiNon('Question?', QuestionTexte))
		{
		     Code a exécuter si oui
		}
            }

dialog confirm oui/non

JavaScript

Discussions similaires

Partager

Partager