Les techniques modernes de conception Web ont permis aux développeurs d'implémenter rapidement les animations prises en charge par la plupart des navigateurs. Je pense que les messages d'alerte sont très courants, car les boîtes d'alerte JavaScript par défaut ont tendance à être assez intrusives et mal conçues. Cela conduit les développeurs à chercher les solutions qui conviendraient le mieux pour une interface plus conviviale.
Pour ce tutoriel, je souhaite expliquer comment nous pouvons assembler des zones de notification CSS3 qui apparaissent en haut du corps de la page. Les utilisateurs peuvent ensuite cliquer sur les notifications pour les faire disparaître et éventuellement les supprimer du DOM. Pour ajouter une fonctionnalité amusante, j’ai également inclus des boutons sur lesquels vous pouvez cliquer pour ajouter une nouvelle zone d’alerte en haut de la page. Regardez mon exemple de démo pour avoir une meilleure idée de ce que nous allons faire.
Live Demo - Télécharger le code source
Construire la page
Pour commencer, nous devons créer deux fichiers nommés? Index.html? et? style.css ?. Je vais inclure une référence à la dernière bibliothèque jQuery hébergée par le code CDN de Google. Le code HTML est assez simple puisqu'il suffit de créer du texte factice dans une zone d'alerte. Et tout le JavaScript a été ajouté au bas de la page pour économiser sur les requêtes HTTP.
C'est mon code d'en-tête pour définir les documents externes et le doctype HTML5. Pas très compliqué puisque nous sommes en train de construire un exemple de démonstration. Pour les fenêtres de notification, j'ai configuré deux styles différents: succès et erreur. Il existe d'autres styles de conception, tels que les avertissements et les boîtes d'informations, mais je n'ai pas créé de styles alternatifs, car je voulais me concentrer davantage sur les effets.