Share
De temps en temps, vous devrez afficher une boîte d'alerte à vos utilisateurs pour les informer de toute erreur ou notification. Le problème des boîtes d’alerte par défaut fournies par les navigateurs est qu’elles ne sont pas très attrayantes. Lorsque vous créez un site Web avec de superbes combinaisons de couleurs et une animation sophistiquée pour améliorer l'expérience de navigation de vos utilisateurs, les boîtes d'alerte non stylées sembleront déplacées..
Dans ce tutoriel, vous découvrirez une bibliothèque appelée SweetAlert2 qui nous permet de créer toutes sortes de messages d’alerte pouvant être personnalisés pour correspondre à l’aspect de notre site Web..
Avant de pouvoir afficher tous ces messages d'alerte douce à vos utilisateurs, vous devez installer la bibliothèque et l'inclure dans votre projet. Si vous utilisez npm ou tonnelle, vous pouvez l'installer en lançant les commandes suivantes:
npm installer sweetalert2 bower installer sweetalert2
Vous pouvez également obtenir un lien CDN vers la dernière version de la bibliothèque et l'inclure dans votre page Web à l'aide de balises de script:
Outre le fichier JavaScript, vous devrez également charger un fichier CSS utilisé pour styler toutes les boîtes d’alerte créées par la bibliothèque:
Une fois la bibliothèque installée, il est très facile de créer une alerte rapide. Il suffit d’appeler le swal () une fonction. Assurez-vous simplement que la fonction est appelée après le chargement du DOM.
Il existe deux manières de créer une alerte douce à l'aide du swal () une fonction. Vous pouvez soit transmettre le titre, le corps du texte et la valeur de l'icône dans trois arguments différents, soit un argument unique en tant qu'objet avec des valeurs différentes en tant que paires clé-valeur. Tout passer dans un objet est utile lorsque vous souhaitez spécifier des valeurs pour plusieurs arguments.
Lorsqu'un seul argument est passé et qu'il s'agit d'une chaîne, l'alerte douce affichera uniquement un titre et un bouton OK. Les utilisateurs pourront cliquer n'importe où en dehors de l'alerte ou sur le bouton OK afin de la supprimer..
Lorsque deux arguments sont passés, le premier devient le titre et le second devient le texte à l'intérieur de l'alerte. Vous pouvez également afficher une icône dans la zone d’alerte en passant un troisième argument. Cela peut avoir n'importe laquelle des cinq valeurs prédéfinies: Attention, Erreur, Succès, Info, et question. Si vous ne passez pas le troisième argument, aucune icône ne sera affichée dans le message d'alerte..
Accentsconagua
document.querySelector (". first"). addEventListener ('click', function () swal ("Notre première alerte");); document.querySelector (".second"). addEventListener ('click', function () swal ("Notre première alerte", "Avec du texte dans le corps!");); document.querySelector (". tiers"). addEventListener ('click', function () swal ("Notre première alerte", "Avec du texte et une icône de succès!", "succès"););Si vous souhaitez simplement afficher des informations de base dans une boîte d’alerte, l’exemple précédent fera très bien l'affaire. Cependant, la bibliothèque peut faire beaucoup plus que simplement montrer aux utilisateurs du texte contenu dans un message d’alerte. Vous pouvez modifier chaque aspect de ces messages d’alerte en fonction de vos besoins..
Nous avons déjà couvert le titre, le texte et les icônes à l'intérieur d'un message d'alerte douce. Il y a aussi une option pour changer les boutons à l'intérieur et contrôler leur comportement. Par défaut, une alerte ne comporte qu'un seul bouton de confirmation avec un texte indiquant "OK". Vous pouvez modifier le texte à l'intérieur du bouton de confirmation en définissant la valeur de confirmButtonText propriété. Si vous souhaitez également afficher un bouton d'annulation dans vos messages d'alerte, il vous suffit de définir la valeur de showCancelButton à vrai. Le texte à l'intérieur du bouton d'annulation peut être modifié à l'aide du bouton cancelButtonText propriété.
Chacun de ces boutons peut avoir une couleur de fond différente en utilisant le bouton confirmerButtonColor et cancelButtonColor Propriétés. La couleur par défaut du bouton de confirmation est # 3085d6, tandis que la couleur par défaut du bouton d'annulation est #aaa. Si vous souhaitez appliquer une autre personnalisation aux boutons Confirmer ou Annuler, vous pouvez simplement utiliser le bouton confirmButtonClass et annulerButtonClass propriétés pour leur ajouter une nouvelle classe. Une fois les classes ajoutées, vous pourrez utiliser CSS pour changer l’apparence de ces boutons. Vous pouvez également ajouter une classe sur le modal principal lui-même en utilisant le customClass propriété.
Si vous avez interagi avec les messages d’alerte du premier exemple, vous avez peut-être remarqué que les modaux peuvent être fermés en appuyant sur la touche Entrer ou Échapper clé. De même, vous pouvez également cliquer n'importe où en dehors du modal pour le supprimer. Cela se produit parce que la valeur de allowEnterKey, allowEscapeKey, et allowOutsideClick est réglé sur vrai par défaut.
Lorsque vous affichez deux boutons différents dans un modal, le bouton de confirmation est celui qui est actif par défaut. Vous pouvez supprimer le focus du bouton de confirmation en définissant la valeur de focusConfirm à faux. De même, vous pouvez également activer le bouton Annuler en définissant la valeur de focusAnnuler à vrai.
Le bouton de confirmation est toujours affiché sur le côté gauche par défaut. Vous avez la possibilité d’inverser les positions des boutons de confirmation et d’annulation en définissant la valeur de boutons inverses à vrai.
Outre la modification de la position et de la couleur des boutons dans les messages d'alerte, vous pouvez également modifier l'arrière-plan et la position du message d'alerte ou le fond qui l'entoure. De plus, la bibliothèque vous permet également d'afficher vos propres icônes ou images personnalisées dans les messages d'alerte. Cela peut être utile dans beaucoup de situations.
Vous pouvez personnaliser le fond d’une alerte douce en utilisant le toile de fond propriété. Cette propriété accepte une valeur booléenne ou une chaîne. Par défaut, l'arrière-plan d'un message d'alerte est constitué principalement de couleur gris transparent. Vous pouvez le cacher complètement en définissant la valeur de toile de fond à faux. De même, vous pouvez également afficher vos propres images en arrière-plan en réglant la toile de fond valeur en tant que chaîne. Dans ce cas, la valeur totale du toile de fond la chaîne est assignée au CSS Contexte propriété. L'arrière-plan d'un message d'alerte douce peut être contrôlé à l'aide de la touche Contexte propriété. Tous les messages d'alerte ont un fond complètement blanc par défaut.
Tous les messages d'alerte apparaissent par défaut au centre de la fenêtre. Cependant, vous pouvez les faire apparaître à partir d’un emplacement différent en utilisant le bouton position propriété. Cette propriété peut avoir neuf valeurs différentes avec des noms explicites: Haut, top start, extrémité supérieure, centre, départ du centre, centre-fin, bas, départ bas, et extrémité inférieure.
Vous pouvez désactiver l’animation lorsqu’un modal apparaît en définissant la valeur du paramètre animation propriété à faux. La bibliothèque fournit également un minuteur propriété pouvant être utilisée pour fermer automatiquement le minuteur une fois qu'un nombre spécifique de millisecondes s'est écoulé.
Dans l'exemple suivant, j'ai utilisé différentes combinaisons de toutes les propriétés décrites dans cette section pour créer quatre messages d'alerte différents. Cela devrait montrer comment vous pouvez complètement changer l'apparence et le comportement d'un modal créé par la bibliothèque SweetAlert2..
document.querySelector (". first"). addEventListener ("click", function () swal (title: "Afficher deux boutons dans l'alerte", showCancelButton: true, confirmButtonText: "Confirmer", confirmButtonColor: "# 00ff99" , cancelButtonColor: "# ff0099");); document.querySelector (".second"). addEventListener ("click", function () swal (title: "Êtes-vous sûr de vouloir supprimer ce fichier?", tapez: "info", showCancelButton: true, confirmButtonText: "Delete Il ", confirmButtonColor:" # ff0055 ", cancelButtonColor:" # 999999 ", reverseButtons: true, focusConfirm: false, focusCancel: true);); document.querySelector (". tiers"). addEventListener ("clic", fonction () swal (titre: "image de profil", texte: "Souhaitez-vous que l'image ci-dessus devienne votre image de profil?", imageUrl: " https://images3.imgbox.com/4f/e6/wOhuryw6_o.jpg ", imageWidth: 550, imageHeight: 225, imageAlt:" Eagle Image ", showCancelButton: true, confirmButtonText:" Oui ", cancelButtonText:" Non ", confirmButtonColor: "# 00ff55", cancelButtonColor: "# 999999", reverseButtons: true,);); document.querySelector (". quart"). addEventListener ("clic", fonction () swal (titre: "Jeu d'alerte sur le minuteur", texte: "cette alerte disparaît après 3 secondes.", position: "bas" , toile de fond: "dégradé linéaire (jaune, orange)", arrière-plan: "blanc", allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: false, showCancelButton: false, minuterie: 3000);); L'initialisation de différents messages d'alerte douce pour les montrer aux utilisateurs est une chose, mais vous aurez parfois aussi besoin d'accéder à des méthodes qui contrôlent le comportement de ces messages d'alerte après l'initialisation. Heureusement, la bibliothèque SweetAlert2 fournit de nombreuses méthodes qui peuvent être utilisées pour afficher ou masquer un modal, ainsi que pour obtenir son titre, son texte, son image, etc..
Vous pouvez vérifier si un modal est visible ou masqué à l'aide du bouton est visible() méthode. Vous pouvez également fermer par programmation un modal ouvert à l’aide de la touche Fermer() ou closeModal () méthodes. Si vous utilisez le même ensemble de propriétés pour plusieurs messages d’alerte lors de leur initialisation, vous pouvez simplement appeler le setDefaults (configurationObject)méthode au début pour définir la valeur de toutes ces propriétés à la fois. La bibliothèque fournit également un réinitialiser par défaut() méthode pour réinitialiser toutes les propriétés à leurs valeurs par défaut.
Vous pouvez obtenir le titre, le contenu et l'image d'un modal à l'aide du bouton getTitle (), Obtenir du contenu(), et getImage () méthodes. De même, vous pouvez également obtenir le code HTML qui compose les boutons de confirmation et d’annulation à l’aide du bouton getConfirmButton () et getCancelButton () les méthodes.
Il y a beaucoup d'autres méthodes qui peuvent être utilisées pour effectuer d'autres tâches telles que cliquer par programme sur les boutons de confirmation ou d'annulation..
La bibliothèque SweetAlert2 permet aux développeurs de créer très facilement des messages d’alerte personnalisés à montrer à leurs utilisateurs en définissant simplement les valeurs de quelques propriétés. Ce tutoriel visait à couvrir les bases de cette bibliothèque afin que vous puissiez créer rapidement vos propres messages d'alerte personnalisés..
Pour éviter que le message ne devienne trop gros, je n’ai couvert que les méthodes et propriétés les plus couramment utilisées. Si vous souhaitez en savoir plus sur toutes les autres méthodes et propriétés pouvant être utilisées pour créer des messages d'alerte avancés, consultez la documentation détaillée de la bibliothèque..
N'oubliez pas de consulter les autres ressources JavaScript disponibles sur le marché Envato, ainsi que.
N'hésitez pas à me faire savoir s'il y a quelque chose que vous voudriez que je clarifie dans ce tutoriel..
