Alert/Confirm Customisés

Version imprimable

01/12/2005, 09h17
ashurai

Alert/Confirm Customisés

Bonjour à tous,

J'essaie de personnalisé les alert et confirm de base javascript.
J'ai déja été orienté un 1ere fois sur ce site :
http://slayeroffice.com/code/custom_alert/

qui m'a permis de répondre presque totalement à mon besoin, il ne manque plus qu'une chose, et mes recherche restent vaine...
Le problème, c'est que le fait de remplacer l'utilisation du alert de base par la fonction ainsi présentée sur le site n'est pas "bloquant", je m'explique :
Si je veux valider un formulaire alors qu'un champ obligatoire n'est pas renseigné, l'alert "perso" s'affiche (à l'endroit ou je le veux) mais comme je veux mettre le champ en focus, cela se fait aussitot, sans attendre d'avoir cliqué sur le "OK"...

Encore plus dur, pour les confirm... Je dois attendre une réponse "oui" ou "non"...

J'ai éssayer de faire "attendre" le script j'usqu'a une réponse avec une fonction wait() perso... mais ca change rien.

Y a t'il un expert javascript matinal ?

Merci d'avance...
01/12/2005, 09h27
SpaceFrog

j'ai pas été voir le site mais le principe doit être un div dont on modifie le display ou le visibility...

pour le rendre bloccant, il faut rajouter un div qui pernd toute la hauteur et la largeur de la page et le mettre en z-index intermédiaire entre la page et l'alert perso

Code:

<div id="masque" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;" onmousedown="alert('alors c\'est oui ou c'est non ?');return false;">

tu bascules le display en block et tu le donne un bon z-index...
en principe il prendras les clicks indésirables ...
01/12/2005, 09h41
ashurai
Tu veux dire que je dois encadre le div de mon alert par celui que tu m'as donné ?

Parcequ'en fait j'utilise la fonction suivante :
Code:

1 2 3 4 5 6 7 8 if(document.getElementById) { window.alert = function(txt) { createCustomAlert(txt); } }
Donc, dés que je fais un alert, j'utilise à la place l'alert custom, et du coup ce n'est pas le div dont tu me parles qui est l'origine du alert (sur l'evenement onmousedown).

En fait, je ne vois pas trop ou je dois poser ce div pour que ca marche :(

Désolé si j'ai trop de mal ..
01/12/2005, 09h51
ashurai

Pour l'instant j'ai placé mon ce div avec un display "none" dans ma page, je met son display a "block" juste avant l'affichage de mon alert custom... Et ce n'est point bloquant .. :?
01/12/2005, 10h01
SpaceFrog

au moment ou tu affiche le div de l'alert customisé ...
a condition que ce soit sur le pricipe de div et non de popup !!!
et en attribuant un z-index de façon a avoir en couches successives:
- le contenu de la page
- le masque
- le div d'alert (si c'est bien un div!!!)

ce système fonctionne et j'en veux pour preuve que je l'utilise !

En fait je viens de me rendre compte que ce que tu dit de faire etait en fait déja fait...

Voila ce que j'ai dans ma feuille de style :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #modalContainer { position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; } #alertBox { position:relative; width:300px; min-height:100px; margin-top:50px; border:2px solid #000; background-color:#F2F5F6; background-position:20px 30px; visiblity:hidden; z-index:20000; }
Mon modal container est ajouté au body au moment de l'alert, et mon alertBox est ajouté au modalContainer, j'ai donc bien l'architecture demandée. Je ne peux cliquer nul par ailleur que sur mon alert, mais ca n'a pas bloqué l'execution du script parent, le focus se fait sans attendre le clic sur "OK"... :(

En tous cas, vraiment merci de passer du temps la dessus pour moi, c'est cool.

01/12/2005, 10h20
SpaceFrog

blcker l'execution du script ....

heu oui mais quel script et bloquer où ???

Désolé si je suis pas trés clair, en fait, j'ai un formulaire à valider, sur le clic du bouton valider, j'utilise cette fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function valider()
{
  if(document.getElementById('monChampObligatoire').value=='')
  {
     alert('champ obligatoire');
     document.getElementById('monChampObligatoire').focus();
  }
}
 
Mon alert() est remplacé par mon div "custom", et mon focus n'attend pas le clic sur le bouton "ok" du div...
 
Et j'ai donc un probleme encore plus grand avec les confirm()...

01/12/2005, 10h32
SpaceFrog

heu j'avoue ne pas te suivre ...
le alert('champs obligatoire') est remplacé par ton alert perso et tu veux attendre que l'utilsateur clique sur ton message d'alert perso avant de continuer le script et passer le focus ???

si c'est le cas un setInterval s'impose ...
01/12/2005, 10h48
ashurai

Oui c'est ca !
Ca y est on s'est compris.

En fait, j'avais déja utilisé ce genre de solution, mais j'avais à chaque découpé en plusieur scripts le script "parent".

Le probleme ici, c'est que l'appli en question est déja toute faite, et je ne voudrais pas me refaire tous les scripts !
C'est pourquoi un remplacement général des alert et confirm serait pas mal.

Je vais voir si un setInterval peux m'aider(je ne connais pas ...)
01/12/2005, 11h13
ashurai

Bon... le setInterval() ne va pas m'etre d'une grande aide... Ca ne bloque pas le script parent.

Je crois que ca va pas être possible... Je vais devoir reprendre tous les script (pas cool..)

En tous cas merci pour ton aide
01/12/2005, 11h15
SpaceFrog

tu testes un flag boolean global dans le setInterval et la en focntion du test sur ton boolean tu lances ou non la seconde fonction ...
alors toujours pas utile le setInterval ?.
01/12/2005, 11h22
ashurai
Si, mais ca m'oblige a créer une seconde fonction, dans laquelle l'action entrepris va dépendre du contexte, il va donc falloir que je le détermine pour chaque script ..

Pour mon exemple, je devrais passer en paramêtre de la fonction le champs à mettre en focus, et donc retirer la ligne de ma fonction "valider()", et faire cela pour chaque script ayant un alert ou un confirm...

Pour mes confirm, les script sont du type :
Code:

1 2 3 4 5 6 7 8 9 if(confirm('supprimer')) { [Action de suppression] } else { [Rien du tout] }
je vais devoir faire juste afficher mon div avec ma fonction, et mettre mon action de suppression dans un script se lancant sur le clic du bonton "oui"...

Du coup, le fait d'utiliser le
Code:

1 2 3 4 5 window.confirm = function(txt) { createCustomConfirm(txt); }
ne sert plus à rien, car je dois connaitre l'action à entreprendre sur le "oui"...

Bref... Je vais pas écrire un roman.. J'aurais ésperer que ce soit jouable autrement.

Merci bien pour tes conseils
01/12/2005, 11h27
SpaceFrog

peur que ce ne soit pas possible autrement ... :cry:
01/12/2005, 12h08
siddh

salut,
je suis confronté un peu au meme probleme que toi.
Si tu dev que pour ie, tu peux utiliser un showmodaldialog qui te permettra de faire ce que tu veux.

Malheureusement, on ne peut pas faire de threads multiples en js.
Tu ne peux pas faire en sorte par exemple que apres avoir afficher ta popup perso, la page se mette en attente d'une notification de ta popup.
01/12/2005, 13h39
ashurai

Merci pour ton conseil, malheureusement, l'appli doit être compatible IE / Firefox :(
01/12/2005, 15h13
siddh

oui ben alors t es comme moi, pas de solution pour autre chose que alert,
moi c est prompt que je veux "surcharger" :(