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.

Boite de dialogue personnalisée [Sources]

Contribuez

Vue hybride

Discussions similaires

Partager

Partager