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