Discussion :

[samche]

Bonjour,

Au vu du titre, on se dit surement "wow le noob, strop facile"... Pourtant je galère pas mal à trouver ne serait-ce qu'un exemple qui fasse ce dont j'ai envie.

Je vous copie-colle ci-dessous mon code actuel qui fonctionne parfaitement mais dont il me manque une fonctionnalité que j'aimerai rajouter (désolé pour le code html, quand je le copie-colle le serveur ne poste pas le message).

test.html

Code :

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

1
2
 
input type="button" onclick="msgbox(2, 'Alors ? oui ou non ?');" value="tester"

msgbox.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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
function msgbox( level, texte )
{
  grayOut( true );
  afficherMsgbox( level, texte);
}
 
function grayOut( vis )
{
  var dark    = document.getElementById( 'msgbox_darkScreen' );
  if ( ! dark )
  {
    var tbody = document.getElementsByTagName( 'body' )[0];
    var tnode = document.createElement( 'div' );
        tnode.style.display  = 'none';
        tnode.id             = 'msgbox_darkScreen';
    tbody.appendChild( tnode );
    dark = document.getElementById( 'msgbox_darkScreen' );
  }
 
  if ( vis )
  {
    var pageWidth  = '100%';
    var pageHeight = '100%';
 
    dark.style.width           = pageWidth;
    dark.style.height          = pageHeight;
    dark.style.display         = 'block';
  }
  else
  {
    dark.style.display = 'none';
  }
}
 
function afficherMsgbox( level, texte )
{
  var msgbox  = document.getElementById( 'msgbox' );
  if ( ! msgbox )
  {
    var tbody = document.getElementsByTagName( 'body' )[0];
    var msgbox                  = document.createElement( 'div' );
        msgbox.id               = 'msgbox';
    tbody.appendChild( msgbox );
 
    var marginLeft = ( ( document.body.clientWidth - msgbox.offsetWidth ) / 2 ) + 'px';
	  msgbox.style.marginLeft = marginLeft;
  }
 
  var oui = document.createElement( 'img' );
      oui.setAttribute( 'id','oui' );
      oui.src   = "oui.png";
      oui.marginTop = "200px";
      oui.align = "left";
 
  var non = document.createElement( 'img' );
      non.setAttribute( 'id','non' );
      non.src   = "non.png";
      non.align = "right";
 
  var fermer = document.createElement( 'img' );
      fermer.setAttribute( 'id','fermer' );
      fermer.src   = "fermer.png";
      fermer.align = "right";
 
  var contenu = document.createElement( 'div' );
      contenu.setAttribute( 'id','contenu' );
      contenu.innerHTML = texte;
 
	/*
	 * Redéfinition des événements
	 */
	var err;
	fermer.onclick = function( )
	{
		fermerMsgbox( msgbox );
  }
 
	oui.onclick = function( )
	{
		fermerMsgbox( msgbox );
  }
 
	non.onclick = function( )
	{
		fermerMsgbox( msgbox );
	}
 
  /*
   * Gestion des niveaux d'erreur
   */
  switch ( level )
  {
    case 1:
      msgbox.className = 'error';
      document.body.appendChild( msgbox );
      var idBoite = document.getElementById( 'msgbox' );
		      idBoite.appendChild( fermer );
		      idBoite.appendChild( contenu );
      break;
 
    case 2:
      msgbox.className = 'question';
      document.body.appendChild( msgbox );
      var idBoite = document.getElementById( 'msgbox' );
		      idBoite.appendChild( contenu );
		      idBoite.appendChild( oui );
		      idBoite.appendChild( non );
      break;
 
    case 3:
      msgbox.className = 'info';
      document.body.appendChild( msgbox );
      var idBoite = document.getElementById( 'msgbox' );
		      idBoite.appendChild( fermer );
		      idBoite.appendChild( contenu );
      break;
 
    case 4:
      msgbox.className = 'success';
      document.body.appendChild( msgbox );
      var idBoite = document.getElementById( 'msgbox' );
		      idBoite.appendChild( fermer );
		      idBoite.appendChild( contenu );
      break;
 
    default: 
      alert( "[ERROR] msgbox.js : Le niveau d'erreur 'level' n'existe pas" );
      fermerMsgbox( msgbox );
      return 0;
      break;
  }
}
 
function fermerMsgbox( msgbox )
{
  document.body.removeChild( msgbox );
  grayOut( false );
}

msgbox.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
59
60
61
 
#msgbox_darkScreen
{
  -moz-opacity     : 0.2;
  -ms-filter       : 'alpha(opacity=20)';
  background-color : #000000;
  filter           : alpha(opacity=20);
  left             : 0px;
  opacity          : 0.2;
  overflow         : hidden;
  position         : absolute;
  top              : 0px;
  z-index          : 90;
}
 
#msgbox
{
  background-position : 10px center;
  background-repeat   : no-repeat;
  border              : 1px solid;
  display             : block;
  filter              : alpha(opacity=100);
  font-family         : Arial;
  font-size           : 13px;
  margin              : 150px 0px 0px 0px;
  Moz-opacity         : 1;
  opacity             : 1;
  overflow            : hidden;
  padding             : 15px 10px 15px 50px;
  position            : absolute;
  width               : 400px;
  z-index             : 91;
}
 
#msgbox.info
{
  color: #00529B;
  background-color: #BDE5F8;
  background-image: url('info.png');
}
 
#msgbox.success
{
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}
 
#msgbox.question
{
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url('warning.png');
}
 
#msgbox.error
{
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url('error.png');
}

L'objectif de ces 3 fichiers est de griser l'écran et faire apparaitre une boite de dialogue que l'utilisateur doit valider. Aucune autre action ne peut être entreprise par l'utilisateur sur l'application (bien sûr, précédente et actualiser fonctionnent encore même si je n'aime pas ça).

Le level indique le niveau d'erreur de 1 à 4 (du plus au moins grave dirons-nous). Je me suis inspiré ici-même d'un tuto sur les css concernant les messages personnalisés.

Tout ceci fonctionne parfaitement. Mon problème se trouve sur le level 2. Je me suis dit que tant qu'à faire une jolie boite pour prévenir l'utilisateur d'un événement quelconque, je pourrai très bien lui demander d'autoriser ou non une action. Je rajoute donc une paire de bouton oui/non.

Mon problème est de savoir sur quel bouton mon utilisateur a cliqué pour effectuer l'action nécessaire si il répond oui (pour le non, on ignore et ça roule). Je sais que ça se passe en gros dans le oui.onclick = function() { blablabla }. Pourtant, je n'arrive pas à m'en sortir.

Je pense que ce bout de code est intéressant et si jamais j'arrive à le faire fonctionner je le poserai, avec les fichiers accompagnants, dans les "trucs et astuces" de developpez.com

Je suis bien sur ouvert à toute proposition permettant d'améliorer ce code (notamment les chemins vers les fichiers images qu'il faudrait rendre "paramétrables").

Merci

[ornitho13]

sur le onclick passe le this qui réference ton élément DOM

Exemple

Code :

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

1
2
<input type="button" onclick="msgbox(this,2, 'Alors ? oui ou non ?');" value="tester"/>

Dans la fonction msgbox :

Code :

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

1
2
3
4
 
function msgbox( eltDom, level, texte){
    ...//traite le msg
}

Au passage, cette partie du forum sert à la contribution ( partage de sources, articles, etc.), tu devrais déplacer cela dans le forum Javascript

Bon courage

[samche]

Merci je vais essayer ça

édit ...

j'ai lu trop vite... J'ai du mal m'expliquer. Je ne veux pas savoir sur quel bouton de ma page j'ai cliqué. Mettons-nous en situation :

J'ai une page de login avec 2 champs : utilisateur et mot de passe.

Lorsque je clique sur OK mais que le champ utilisateur est vide, je peux très bien me contenter d'un alert() mais j'ai décidé de faire un truc plus "sexy". Je veux griser ma fenêtre et faire apparaitre une belle boite de dialogue en précisant quelle est l'erreur. C'est à ça que sert ma fonction msgbox.

Maintenant je veux aller plus loin. Remettons-nous en situation :

Je veux supprimer un élément d'une liste mais avant, je souhaite demander à l'utilisateur si il veut réellement supprimer cet élément de la liste. Je peux très bien me contenter d'un confirm() mais là aussi j'ai décidé de faire un truc plus "sexy". Je veux griser ma fenêtre et faire apparaitre une belle boite de dialogue en rajoutant deux boutons "oui" et "non". Si l'utilisateur clique sur "non", pas de problème, j'enlève la boite et le grisé et il ne se passe rien. Mon problème c'est lorsqu'il clique sur "oui" !!! comment je peux récupérer cette information ?

J'insiste sur la partie du code ci-dessous :

oui.onclick = function() { blablabla }

qui est pour moi la plus "mystérieuse" et dont je suis quasiment sur qu'il faut la modifier pour arriver à mes fins.

J'ai bien tenté un

Code :

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

1
2
 
err = oui.onclick = function() { blablabla; return 1 }

Mais ça n'a pas du tout l'effet escompté.

ps : ouh la honte !!! se tromper de forum c'est la loose lol désolé Et je ne sais pas comment le changer de forum, si qqn pouvait me faire ça