Boîte de dialogue évoluée

Version imprimable

Bonjour,

je voudrais que dans ma page écrite en php, s'affiche à l'appui sur un bouton une boîte de dialogue avec une question oui/non... Je pourrais bien utiliser: confirm, mais c'est plutôt OK et interrompre, que oui/non, donc ce n'est pas exactement ce que je veux...
Code:

1 2 3 4 5 6 7 8 9 <html><head><title>Test</title> <script type="text/javascript">  </script> </head><body> </body></html>
Etendons même la question: si on veut une boîte de dialogue avec 3 choix possibles... oui, non, peut-être... comment fait-on??? Faut-il générer un mini-formulaire html? Y a-t-il une solution plus simple faisant appel à Javasript?

Cordialement
Mathieu

26/02/2008, 18h08
Auteur

Boite de dialogue personnalisée ;)
26/02/2008, 18h45
SpaceFrog

rhooooooooooo la pub !
:aie:

sinon window prototype ...
26/02/2008, 19h36
Auteur

Citation:

Envoyé par SpaceFrog

rhooooooooooo la pub !
:aie:

ben quoi :oops:

Citation:

Envoyé par SpaceFrog

sinon window prototype ...

la pub y fait référence :mrgreen:
26/02/2008, 20h35
Mathieu72

Alors je regarde le travail de Auteur, voir un peu comment ça fonctionne... Est-ce que ce serait possible de l'adapter pour avoir un bouton "oui" et un bouton "non" (ça c'est bon j'y suis déjà arrivé!) et pour qu'en cliquant sur oui ou non, une autre page php soit ouverte avec en plus des variables déjà postées, une nouvelle variable qui contient 0 ou 1 selon qu'on a cliqué sur oui ou non...

Typiquement par exemple:
- un formulaire avec des informations sur une personne (déjà fait...)
- un bouton pour soumettre le formulaire
- le bouton ouvre une boîte de dialogue qui demande si la personne est prioritaire
- la valeur d'un champ "prioritaire" à 0 ou à 1 est posté avec les autres valeurs
- on arrive sur une nouvelle page php qui contient la requête sql (ça c'est déjà fait aussi...)

Comment me conseillez-vous de faire? de quel type va être la valeur fournie par la fenêtre javascript? y a-t-il moyen de poster cette valeur? sinon quel moyen mettre en oeuvre?

Cordialement
Mathieu

Bonsoir,

Donc, en m'inspirant du travail de Auteur, sur http://www.developpez.net/forums/sho...d.php?t=338493 que j'ai simplifié pour mon usage personnel, je suis arrivé à:
Code:

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 <script type="text/javascript"> function ouvreBoite() { document.getElementById("maBoiteHtm").style.display = "block";} function clicOui() { document.formulaire.prioritaire.value='Oui';document.forms['formulaire'].submit();} function clicNon() { document.formulaire.prioritaire.value='Non';document.forms['formulaire'].submit();} </script> <FORM method=post id="formulaire" name="formulaire" action="requete test.php"> <input type=hidden name='prioritaire'> Enregistrement d'un utilisateur Nom<INPUT type=text name="nom"> Prénom<INPUT type=text name="prenom"> <style type="text/css"> .conteneurPrompt{ /** Firefox **/ position: fixed; top: 25%; left: 25%; border: 3px outset #AAAAAA; /*height: 150px;*/ width: 50%; display: none; z-index: 2000; /** IE **/ position: expression(IEFixedElementPos()); /** on tient compte des 25% definis plus haut **/ top: expression(IEFixedElementTop(parseInt(document.body.clientHeight * 25/100))); left: expression(IEFixedElementLeft(parseInt(document.body.clientWidth * 25/100))); } </style> <div id="maBoiteHtm" class="conteneurPrompt"> Enregistrement prioritaire? <button onclick='clicOui();'>Oui</button> <button onclick='clicNon();'>Non</button> </div> <input type="button" value="Soumettre le formulaire" onclick="ouvreBoite();"> </form>
et après pour controler, comme avant, le fichier "requete test.php":
Code:

1 2 3 voici les variables postées:<BR><BR> <? echo "nom: ".$nom."<BR>prénom: ".$prenom."<BR>prioritaire?: ".$prioritaire;?>
Les questions qui subsistent:
- une erreur se produit au chargement de la deuxième page (erreur qui se produisait déjà en faisant un simple copier-coller du code du lien). D'où vient cette erreur?
- La boîte de dialogue est en fait une division html. Ne peut-on pas faire en sorte qu'une vraie boîte de dialogue s'affiche? Ou du moins que la boîte de dialogue prenne toute la page? s'affiche à la place du reste?

Mathieu

29/02/2008, 10h17
Auteur

Ce qui m'inquiète dans ton code est la présence des feuilles de styles dans le code HTML :?

Et lors du clic, j'ai l'impression que la boite n'est pas fermée.

Citation:

- une erreur se produit au chargement de la deuxième page (erreur qui se produisait déjà en faisant un simple copier-coller du code du lien). D'où vient cette erreur?

quelle erreur ?

Citation:

- La boîte de dialogue est en fait une division html. Ne peut-on pas faire en sorte qu'une vraie boîte de dialogue s'affiche? Ou du moins que la boîte de dialogue prenne toute la page? s'affiche à la place du reste?

En JS il n'existe que 3 type de boites de dialogues :
alert, prompt et confirm.
Si tu veux qu'elle prenne toute la page, mets le width et le height du div à 100% ou créé une autre page avec seulement ce formulaire.
29/02/2008, 13h47
Mathieu72
Pour ce qui est de la feuille de style dans le code html, ça ne m'empêche pas de dormir :-) ... ce n'est pas très grave si?

pour ce qui est de l'erreur, en utilisant IE, c'est (je recopie):
Ligne 1
Car 1
Erreur: Objet attendu...
Fais un copier-coller de ton code et l'erreur devrait se produire...

Enfin pour ce qui est redimensionner la fenêtre, j'ai changé le code en
Code:

1 2 top: expression(IEFixedElementTop(parseInt(document.body.clientHeight * 100/100))); left: expression(IEFixedElementLeft(parseInt(document.body.clientWidth * 100/100)));
mais la fenêtre est toujours aussi petite...

Merci
Mathieu
29/02/2008, 15h19
Auteur
Citation:

Envoyé par Mathieu72

Pour ce qui est de la feuille de style dans le code html, ça ne m'empêche pas de dormir :-) ... ce n'est pas très grave si?

toi tu pourras dormir tranquille mais ton navigateur, lui, va tiquer :mrgreen: Mets la feuille de style dans le head de la page.

Citation:

pour ce qui est de l'erreur, en utilisant IE, c'est (je recopie):
Ligne 1
Car 1
Erreur: Objet attendu...

tu as bien le script dans la partie head de ta page ?

Logiquement tu n'as que la partie HTML à modifier... et complèter les fonctions clicOk (ou clicOui dans ton cas) et clicAnnuler (clicNon dans ton cas) sans oublier d'appeler d'appeler la fonction fermeBoite().
Citation:
Enfin pour ce qui est redimensionner la fenêtre, j'ai changé le code en

Code:

1 2 top: expression(IEFixedElementTop(parseInt(document.body.clientHeight * 100/100))); left: expression(IEFixedElementLeft(parseInt(document.body.clientWidth * 100/100)));

mais la fenêtre est toujours aussi petite...
top (haut) et left (gauche) positionnne le div par rapoort au coin supérieur gauche de ta fenêtre. Il faut modifier les attributs width et height ;)

Salut,

alors d'abord pour ce qui est du script dans le head, eh bien disons que j'essaierai de le faire. Mais à mon avis le problème est ailleurs. Car dans ton code si impeccable :-) le script est bien dans le head, et pourtant l'erreur se produit. Enfin j'ai essayé de mettre des trucs en commentaire, pour voir où il plantait, et je suis arrivé à la conclusion, que l'erreur se produisait, dés qu'on faisait appel à une classe:
Code:

1 2 3 <div id="idFond" class="fond">   </div>
rien que ça produit une erreur du navigateur qui utilise la classe "fond"... Peut-être y a-t-il une déclaration à faire avant? Cette erreur-là n'est-elle pas un problème d'en-tête? je ne sais pas...

Au passage, c'est quoi &nbsp???

Pour ce qui est de la hauteur et de la largeur, c'est bon, mais à vrai dire, dans ton code tel qu'il était annoté:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .conteneurPrompt{ /** Firefox **/ position: fixed; top: 25%; left: 25%; border: 3px outset #AAAAAA; /*height: 150px;*/ width: 50%; display: none; z-index: 2000; /** IE **/ position: expression(IEFixedElementPos()); /** on tient compte des 25% definis plus haut **/ top: expression(IEFixedElementTop(parseInt(document.body.clientHeight * 25/100))); left: expression(IEFixedElementLeft(parseInt(document.body.clientWidth * 25/100))); }
, on pouvait bien croire que width et height se rapportaient à la fenêtre firefox...

En priorité reste donc cette erreur du navigateur à régler

Cordialement
Mathieu

29/02/2008, 17h17
Mathieu72

remarque: je viens de vérifier: firefox ne produit pas d'erreur.
Mais je viens de vérifier aussi: firefox a l'air très accomodant et produit peu d'erreur, même quand on a mis n'importe quoi dans le code...

Mathieu
29/02/2008, 17h20
SpaceFrog

Vaut mieux lire ça que d'être aveugle ....8O