Boite de dialogue personnalisée [Sources]

**Auteur** · 16/05/2007, 23h15

Source : Boite de dialogue personnalisée
Auteur : Auteur / FremyCompany
Lien FAQ : Position Fixed sous IE
Autre lien : Cacher du javascript dans du CSS (IE-Only)

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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Titre</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript" src="patchIE.js"></script>
 
<style type="text/css">
<!--
/*
Couleurs systeme :
"ActiveCaption" : barre de titre
"ActiveCaptionText" : texte de la bare de titre
"ButtonFace: fond le la fenêtre
*/
 
/*** Styles de la boite de dialogue ***/
.fond{
 /** Firefox **/
 position: fixed;
 top: 0px;
 left: 0px;
 
 height: 100%;
 width: 100%;
 z-index: 1000;
 display: none;
 border: none;
 background-color: #000000;
 -moz-opacity: 0.30;
 opacity: 0.30;
 filter : alpha(opacity=30);
 
 /** IE **/
 position: expression(IEFixedElementPos());
 top: expression(IEFixedElementTop(0));
 left: expression(IEFixedElementLeft(0));
 width: expression(IE100Width());
 height: expression(IE100Height());
}
 
.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)));
 
}
 
.titrePrompt{
 background-color: #AAAAFF;
 color: #000000;
 font-weight: bold;
 font-size: 11pt;
 font-family: Arial;
 text-align: center;
}
 
.contenuPrompt{
 background-color: #DDDDDD;
 color: #000000;
 font-size: 11pt;
 font-family: "Times New Roman";
 margin: 0px;
 padding: 20px;
}
 
.boutonsPrompt{
 text-align: center;
}
 
.ok, .annuler{
 width: 80px;
}
 
.ok{
 margin-right: 10px;
 margin-left: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
}
 
.annuler{
 margin-right: 0px;
 margin-left: 10px;
 margin-top: 0px;
 margin-bottom: 0px;
}
/*** Fin des styles de la boite de dialogue ***/
//-->
</style>
 
<script type="text/javascript">
<!--
function ouvreBoite()
{
  document.getElementById("monPrompt").style.display = "block";
  document.getElementById("idFond").style.display = "block";
}
 
function fermeBoite()
{
  document.getElementById("monPrompt").style.display = "none";
  document.getElementById("idFond").style.display = "none";
}
 
/**************************************************************************/
/** Actions realisees par l utilisateur si clic sur Ok ou Annuler *********/
function clicOk()
{
  fermeBoite();
 
  /** Autres actions a realiser si clic sur Ok **/
  /** ... **/
}
 
 
function clicAnnuler()
{
  fermeBoite();
 
  /** Autres actions a realiser si clic sur annuler **/
  /** ... **/
}
 
/**************************************************************************/
 
//-->
</script>
 
 
</head>
 
<body>
<!-- Debut - Boite de dialogue -->
     <!-- Fond de la boite de dialogue -->
<div id="idFond" class="fond">
&nbsp;
</div>
 
      <!-- Boite de dialogue -->
<div id="monPrompt" class="conteneurPrompt">
 
  <div class="titrePrompt">
       Ceci est le titre de la boite de dialogue
  </div>
 
  <div class="contenuPrompt">
    <!-- debut - elements de la boite de dialogue -->
    Elements de ma boite de dialogue&nbsp;:<br />
    <input type="radio" id="idRadio1" name="radio1" checked="checked" />Choix 1
    <input type="radio" id="idRadio2" name="radio1" />Choix 2
    <input type="radio" id="idRadio3" name="radio1" />Choix 3
    <input type="radio" id="idRadio4" name="radio1" />Choix 4<br />
    <input type="text" value="Votre texte" id="idText" size="20" maxlength="15" />
    <!-- fin - elements de la boite de dialogue -->
 
    <div class="boutonsPrompt">
      <br />
      <input type="button" value="Ok" id="idOk" class="ok" onclick="clicOk()" />
      <input type="button" value="Annuler" id="idAnnuler" class="annuler" onclick="clicAnnuler()" />
    </div>
 
  </div>
 
</div>
<!-- Fin - Boite de dialogue -->
 
 
 
 
<div>
 
<input type="button" value="Ouvrir boite de dialogue" onclick="ouvreBoite()" />
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="button" value="Tester le clic" onclick="alert('clic')" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
</div>
 
</body>
 
</html>

patchIE.js

Code javascript :

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
 
       function IEFixedElementPos()
        {
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
          {
             return ("fixed");
          }
          return ("absolute");
        }
 
        function IEFixedElementTop(defaultTop)
        {
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
          {
             return (defaultTop.toString() + "px;")
          }
          return ((document.body.scrollTop+defaultTop) + "px");
        }
 
        function IEFixedElementLeft(defaultLeft) 
        {
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
          {
             return (defaultLeft.toString() + "px;")
          }
          return ((document.body.scrollLeft+defaultLeft) + "px");
        }
 
        function IE100Width() 
        {
            //IE 7  en mode standard
            if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat")
            {
                return "100%";
            }
            return (document.body.offsetWidth-21) + "px";
        }
 
	function IE100Height() 
        {
            //IE 7  en mode standard
            if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat")
            {
                return "100%";
            }
            return (document.body.offsetHeight-21) + "px";
        }

Remarques :

fonctionne sous Firefox (1 et 2), IE 5, 6 et 7, Opéra 9.2
code valide XHTML 1.1
le code ne passe pas la validation CSS à cause des patch pour IE

La boite de dialogue reste fixe même si l'utilisateur réalise un scroll sur la page. Les boutons, liens, etc, en arrière plan sont désactivés lorsque la boite de dialogue est affichée (boite modale).

La boite de dialogue se compose de 2 éléments qui sont affichés ou cachés en même temps :

un div idFond il a les dimensions de la fenêtre. Son rôle : grâce à sa propriété z-index: 1000 il se place au dessus des éléments de la page et bien que transparent, les liens et les boutons présents dans la page sont inacessibles quand il est affiché.
un div monPrompt qui forme la boite de dialogue qui se place au dessus du div idFond (z-index: 2000). Il se compose de div :
- pour le titre
- pour les élements de la boite de dialogue
- pour les boutons Ok / Annuler (on peut en rajouter )

Vous pouvez utiliser les couleurs système (cf. le commentaire au début de la feuille de style)

Code css :

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

1
2
3
4
5
 
Couleurs systeme :
"ActiveCaption" : barre de titre
"ActiveCaptionText" : texte de la barre de titre
"ButtonFace" : fond le la fenêtre

Le script :

function ouvreBoite() : affiche le fond et la boite de dialogue
function fermeBoite() : cache le fond et la boite de dialogue
function clicOk() : action à réaliser si l'utilisateur clique sur Ok
function clicAnnuler() : action à réaliser si l'utilisateur clique sur Annuler

[edit]Code source mis à jour ce 19 mai 2007

Merci à FremyCompany pour sa contribution

[/edit]
[edit]Code source mis à jour ce 10 septembre 2007

: ajout de la fonction function IE100Height() dans patchIE.js[/edit]

**Auteur** · 17/05/2007, 19h59

Des bugs peuvent persister :
si le clic en dehors de la pop-up est possible, on peut remplacer le div idFond par une image gif transparente de 1px par 1px. (avec un width et un height à 100%)

**wincroc** · 18/05/2007, 10h02

est ce possible d'indiquer a l'utilisateur que le reste de la fenetre est inactive en mettant une opacité de 0.5 par exemple ? si oui, comment ?

**Auteur** · 18/05/2007, 12h18

pour l'opacité :

Code css :

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

1
2
3
4
5
6
7
 
.fond{
background-color: #AAAAAA;
-moz-opacity: 0.50; /** Pour FF : valeur entre 0 et 1 **/
opacity: 0.50; /** Opera je crois **/
filter : alpha(opacity=50); /** IE **/
}

peut-être que cela peut supprimer le bug du clic en dehors de la pop-up

**atar64** · 09/09/2007, 15h40

Je sais pas si c'est moi qui fait une mauvaise intégration(je fais juste un copier coller). Mais sa ne marche pas sous IE6 (Marche bien sous IE7 et FF1&2) le fond grisé ne s'étend pas!

**Auteur** · 10/09/2007, 13h27

Oui effectivement, il manque une fonction dans le patch et un élément dans la CSS (attribut height de la classe fond).

La hauteur du fond n'est pas précisée : regarde à nouveau la source, je l'ai mise à jour.

Teste à nouveau le code sous IE 7, on ne sait jamais.

Pour la fonction IE100Height(), j'ai fait un copier-coller de IE100Width() en remplaçant document.body.offsetWidth par document.body.offsetHeight, je pense que cela devrait fonctionner.

Ca fonctionne sous FF normalement.

**Maxoo** · 10/09/2007, 13h56

Quand je teste le code sous IE6, il me demande d'autoriser l'activeX, y a pas moyen de court-circuiter ça ??

Je crois avoir vu un code javascript qui empechait IE de faire la demander d'activation activeX. Mais j'arrive pas à remettre la main dessus.

Et vous ??

**Auteur** · 10/09/2007, 15h19

Envoyé par Maxoo

Quand je teste le code sous IE6, il me demande d'autoriser l'activeX, y a pas moyen de court-circuiter ça ??

Je crois avoir vu un code javascript qui empechait IE de faire la demander d'activation activeX. Mais j'arrive pas à remettre la main dessus.

Et vous ??

oui, effectivement j'ai également ce message.... Mais là je ne peux pas te répondre

Peut-être que cela vient du test :

Code javascript :

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

1
2
3
4
5
 
if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
{
 
}

Je pense que Fremy est mieux placé que moi pour te répondre (c'est lui qui a écrit le patch IE).

En modifiant les paramètres de sécurité de IE ?

**SpaceFrog** · 11/09/2007, 09h49

window.prototype permet de faire le même genre de dialogues sans faire intervenir d'activeX donc pas de demande d'autorisation ...

**Auteur** · 11/09/2007, 12h08

Envoyé par SpaceFrog

window.prototype permet de faire le même genre de dialogues sans faire intervenir d'activeX donc pas de demande d'autorisation ...

un exemple ?

**Bisûnûrs** · 11/09/2007, 12h10

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

**SpaceFrog** · 13/09/2007, 09h23

Merci fillot

**phcorp** · 03/10/2007, 13h36

super ce script, merci beaucoup

**le_chomeur** · 11/03/2008, 11h22

Salut

Très jolie source auteur, je voulais juste ajouter une précision concernant l'alerte activeX, celle ci est également déclenchée par la propriété 'filter : alpha(opacity=50); /** IE **/' donc , soit en local on remplace par un gif transparent

soit on aura l'alerte

Encore merci pour ta source

**Auteur** · 11/03/2008, 13h01

Envoyé par le_chomeur

Salut

Très jolie source auteur, je voulais juste ajouter une précision concernant l'alerte activeX, celle ci est également déclenchée par la propriété 'filter : alpha(opacity=50); /** IE **/' donc , soit en local on remplace par un gif transparent

soit on aura l'alerte

Encore merci pour ta source

remercie également FremyCompany (patchIE)

Ce qui me supprend est que le filtre déclenche l'alerte activeX, c'est curieux... (car c'est une propriété CSS pas une fonction javascript

)
Cela doit dépendre de la configuration de IE.

Sinon effectivement on peut remplacer par un gif transparent (le png est mal supporté par IE et il faut appliquer des filtres aussi).

**le_chomeur** · 13/03/2008, 10h50

effectues ce petit test pour t'en convaincre :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.fond{
width:200px;
height:200px;
background-color: red;
-moz-opacity: 0.50; /** Pour FF : valeur entre 0 et 1 **/
opacity: 0.50; /** Opera je crois **/
filter : alpha(opacity=50); /** IE **/
}
</style>
</head>
 
<body>
<div class="fond">
</div>
</body>
</html>

Sous ie7 ( toute option par défaut ) demande d'activation d'activeX

**Bisûnûrs** · 13/03/2008, 11h07

Envoyé par le_chomeur

Sous ie7 ( toute option par défaut ) demande d'activation d'activeX

En local seulement.

**le_chomeur** · 13/03/2008, 17h39

Oui oui en local uniquement ( je l'avais précisé lors du premier post :p )

**RomainVALERI** · 06/02/2009, 10h59

Une question me vient à la lecture de ce post : as-tu constaté des problèmes de recouvrement (superposition défectueuse) avec les éventuels select présents dans la page sous IE6 ?

J'avais écrit une fonction à peu près équivalente il y a quelques temps, mais j'avais du passer par une vilaine bidouille (passer tous les select de la page en display none pendant que la fenêtre de dialogue est afichée, avec opération inverse quand elle se referme) pour éviter que les select soient "au-dessus" du div qui cache le fond de la page (div 70% opaque)...

En tout cas merci pour cette contribution, je vais l'utiliser pour faire une petite "revue de code / amélioration" à ma propre fonction, ça lui donnera sûrement un ptit coup de jeune

**Auteur** · 08/02/2009, 13h01

N'ayant pas IE6 je n'ai pas testé....

Avec FF et IE 7 pas de souci de z-index en tout cas.

Boite de dialogue personnalisée [Sources]

Contribuez

Discussions similaires

Partager

Partager