Boîte de dialogue évoluée

**Mathieu72** · 26/02/2008, 17h49

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 :

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

1
2
3
4
5
6
7
8
9
<html><head><title>Test</title>
<script type="text/javascript">
<!--
Check = confirm("Voulez vous vraiment voir cette page?");
if(Check == false) history.back();
//-->
</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

**Auteur** · 26/02/2008, 18h08

Boite de dialogue personnalisée

**SpaceFrog** · 26/02/2008, 18h45

rhooooooooooo la pub !

sinon window prototype ...

**Auteur** · 26/02/2008, 19h36

Envoyé par SpaceFrog

rhooooooooooo la pub !

ben quoi

Envoyé par SpaceFrog

sinon window prototype ...

la pub y fait référence

**Mathieu72** · 26/02/2008, 20h35

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

**Mathieu72** · 29/02/2008, 01h28

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 :

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
<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 :

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

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

**Auteur** · 29/02/2008, 10h17

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.

- 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 ?

- 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.

**Mathieu72** · 29/02/2008, 13h47

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 :

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

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

**Auteur** · 29/02/2008, 15h19

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

Mets la feuille de style dans le head de la page.

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().

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

Code :

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

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

**Mathieu72** · 29/02/2008, 15h44

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 :

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

1
2
3
<div id="idFond" class="fond">
&nbsp;
</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 :

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
.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

**Mathieu72** · 29/02/2008, 17h17

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

**SpaceFrog** · 29/02/2008, 17h20

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

Boîte de dialogue évoluée

JavaScript

Discussions similaires

Partager

Partager