[SRC] Fenêtre modale personnalisée

**Bovino** · 30/01/2009, 09h22

Bonjour,
Suite à cet article et à une demande d'un lecteur, voici un exemple de fenêtre modale d'affichage d'un message.
Un exemple est visible sur cette page.

Le code de la page :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Boîtes de message personnalisées</title>
    <style type="text/css">
    body{
        font-family:Arial, Helvetica, sans-serif; 
        font-size:13px;
    }
        .info, .success, .warning, .error, .validation {
            border: 1px solid;
            margin: 10px 0px;
            padding:15px 10px 15px 50px;
            background-repeat: no-repeat;
            background-position: 10px center;
                cursor: pointer;
        }
        .info {
            color: #00529B;
            background-color: #BDE5F8;
            background-image: url('info.png');
        }
    .success {
            color: #4F8A10;
            background-color: #DFF2BF;
            background-image:url('success.png');
        }
        .warning {
            color: #9F6000;
            background-color: #FEEFB3;
            background-image: url('warning.png');
        }
        .error {
            color: #D8000C;
            background-color: #FFBABA;
            background-image: url('error.png');
        }
        #overlay{
                background-color: black;
                position: absolute;
                margin :0;
                padding : 0;
                top: 0;
                left: 0;
                display : none;
                overflow : hidden;
        }
        #ajout{
                position: absolute;
                top: 100px;
                left: 50%;
                margin-left: -150px;
                width: 300px;
                display: none;
        }
    </style>
<script type="text/javascript">
<!--// [CDATA[ 
var IsIE=!!document.all, calque, essai, timer;
window.onload = function(){
        calque = document.getElementById('overlay');
        var calqueY = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var calqueX = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        calque.style.width = Math.max(document.body.offsetWidth, calqueY) + 'px';
        calque.style.height = Math.max(document.body.offsetHeight, calqueX) + 'px';
        if(IsIE){
                calque.style.filter='alpha(opacity=0)';
                calque.filters[0].opacity=0;
        }
        else{
                calque.style.opacity=0;
        }
}
function creer_message(elt, texte){
        var i=0;
        essai = elt.cloneNode(true);
        essai.id = 'ajout';
        essai.innerHTML = texte;
        document.body.appendChild(essai);
        if(IsIE){
                essai.style.filter='alpha(opacity=0)';
                essai.filters[0].opacity=0;
        }
        else{
                essai.style.opacity=0;
        }
        calque.style.display = 'block';
        essai.style.display = 'block';
        timer = setInterval(function(){
                if(i==100){
                        clearInterval(timer);
                        timer = false;
                        essai.onclick = fin;
                }
                else{
                        if(IsIE){
                                calque.filters[0].opacity = i*0.75;
                                essai.filters[0].opacity = i;
                        }
                        else{
                                calque.style.opacity=(i/100)*0.75;
                                essai.style.opacity=i/100;
                        }
                        i=Math.min(i+5, 100);
                }
        }, 1);
}
function fin(){
        var i=100;
        if(!timer){
                timer = setInterval(function(){
                        if(i==0){
                                clearInterval(timer);
                                calque.style.display = 'none';
                                document.body.removeChild(document.getElementById('ajout'));
                        }
                        else{
                                if(IsIE){
                                        calque.filters[0].opacity = i*0.75;
                                        essai.filters[0].opacity = i;
                                }
                                else{
                                        calque.style.opacity=(i/100)*0.75;
                                        essai.style.opacity = i/100;
                                }
                                i = Math.max(i-5,0);
                        }
                }, 1);
        }
}
// ]] -->
</script> 
</head><body>
    <h1>
        Boîtes de message personnalisées.</h1>
	<div style="" class="info" onclick="creer_message(this, 'Ceci est un message d\'information personnalisé.')">
		Cliquez ici pour afficher un message d'information.</div>
	<div style="" class="success" onclick="creer_message(this, 'Ceci est un message de réussite personnalisé.')">
        Cliquez ici pour afficher un message de réussite personnalisé.</div>
    <div style="" class="warning" onclick="creer_message(this, 'Ceci est un message d\'alerte personnalisé.')">
        Cliquez ici pour afficher un message d'alerte personnalisé.</div>
    <div style="" class="error" onclick="creer_message(this, 'Ceci est un message d\'erreur personnalisé.')">
        Cliquez ici pour afficher un message d'erreur personnalisé.</div>
	<div id="overlay"></div>
</body></html>

Le fonctionnement est simple :
Dans l'exemple, on clique sur un des messages. Un calque apparait progressivement avec le message sélectionné. Il suffit de recliquer sur le message apparu pour quitter la fenêtre.

Le code a été écrit rapidement, il n'est donc pas commenté et n'a été testé que sur FF2 et IE7 pour le moment.
Il est valide XHTML et CSS.

Si vous avez des remarques ou des questions, n'hésitez pas

EDIT :
Tests complémentaires réalisés et le code fonctionne sur IE6/7 (excepté le problème de transparence PNG pour IE6...) FF2/3, Opera, Chrome, Safari

**le_chomeur** · 30/01/2009, 14h32

code propre , juste une remarque , j'aurais ajouté une iframe pour gérer les problèmes lié aux objets flash et liste déroulante sous ie :-)

tite démo :

http://entreamis69.free.fr/modalbox/

**Bovino** · 30/01/2009, 16h08

Merci pour ta remarque.
Effectivement, je n'avais pas pensé à ça...

Comme précisé, je l'ai fait rapidement, mais je mettrai un point d'honneur à rectifier rapidement.

**Tidus159** · 31/01/2009, 23h49

Super code, qui peut être très utile !
Merci.

**kohsaka** · 15/07/2009, 17h14

attention toutefois si la page possède un scroll, l'overlay n'ira pas jusqu'en bas.
pourquoi ne pas plutôt récupérer la taille de la balise body ?

**Bovino** · 15/07/2009, 17h25

Effectivement, il est possible de rajouter :

Code :

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

calque.style.height = document.body.offsetHeight + 'px';

avant la ligne :

Code :

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

calque.style.display = 'block';

**Macmillenium** · 15/07/2009, 21h13

Peut être aussi détecter la position du scroll via pageYOffset/document.documentElement.scrollTop et l'affecter à la propriété top sur #ajout ?
Parce que là, le top:100px est par rapport au body/viewport (selon l'UA ^^)

Invité · 29/09/2009, 11h59

jour

script pas mal mais le fait de cloner les div n'est pas tres interessant car si par exemple on doit cliquer sur un bouton ???? il serait preferable de cree un div qui prendrait les proprietes css de la text box

[SRC] Fenêtre modale personnalisée

Contribuez

Discussions similaires

Partager

Partager