Discussion :

[Bovino]

Salut,

Je vous propose une traduction de l'article anglophone de Janko Jovanovic (Webmaster de Janko at Warp Speed) : CSS Message Boxes for different message types

Dans cet article, l'auteur vous montre comment faire des boîtes de message personnalisées en fonction du type de message : erreur, succès, etc.

Pour toutes questions/suggestions, vous pouvez les faire à la suite de ce message.

Bonne lecture

[gui80]

Bonjour,

effectivement, le jeu de couleur utilisés selon le type de message est vraiment instauré inconsciemment dans notre esprit, étant donné que j'ai deviné sans souci les couleurs par type de message.

C'est concis, clair, mais cependant j'aurai aimé savoir comment mettre un message de ce type en 1er plan, et obscurcir le second plan qui est la page sur lequel on aurait rempli un formulaire par exemple, pour donner un effet de Msgbox comme VB par exemple.

Merci d'avance, espérant avoir une réponse.

[Kerod]

C'est concis, clair, mais cependant j'aurai aimé savoir comment mettre un message de ce type en 1er plan, et obscurcir le second plan qui est la page sur lequel on aurait rempli un formulaire par exemple, pour donner un effet de Msgbox comme VB par exemple.

C'est en effet une bonne question et voici un début de réponse (vu que ce n'est pas le but premier de ce tutoriel) : Il faudrait un calque en position absolute dans lequel on mettrait le code de ce tutoriel. Ce calque pourrait avoir un background-color noir et un légère opacité afin d'obtenir l'effet que l'on voit un peu partout avec les galeries JavaScript.

Par contre, pour faire disparaitre cette boite de message avec son fond transparent noir il faudrait utiliser un peu de JavaScript. Et c'est pourquoi ce tutoriel ne contient pas ce genre de code.

[Bovino]

Bonjour gui80,

Le comportement que tu décris ressemble à ceux fournis par JavaScript via les fonctions alert(), prompt() ou confirm().
Il pourrait effectivement être intéressant d'obtenir ce genre de comportement qui n'est pas nécessairement celui qu'à voulu l'auteur de cet article.
En revanche, je tacherai de proposer ce genre de fonctionnalité prochainement
(à moins que l'on me devance...).

Cordialement et merci pour cette remarque constructive.

[Bovino]

Voilà, un exemple de ce qu'il est possible de faire ici.

[Kerod]

comme toujours

[gui80]

Bonjour,

le code fourni par Bovino répond exactement à mon interrogation.
Le souci du PNG avec IE6 est habituel :-)
Très bel effet, félicitations pour le code et la rapidité d'intervention.

A bientôt