Comment créer une boîte d'alerte personnalisée en javascript

En JavaScript, nous voulons souvent créer des pages Web ayant des boîtes d'alerte personnalisées pour rendre une page Web plus attrayante. De plus, certaines fonctionnalités supplémentaires peuvent également être ajoutées dans la boîte d'alerte aux fins de la personnalisation. Dans de tels cas, la création d'une boîte à alerte personnalisée facilite la vie de votre développement et améliore l'apparence du site Web.

Ce blog illustrera les méthodes de création de boîtes d'alerte personnalisées dans JavaScript.

Comment concevoir une boîte d'alerte personnalisée en JavaScript?

Pour créer une boîte d'alerte personnalisée en JavaScript, vous pouvez utiliser:

• Bibliothèque «SweetAlert»
• Bibliothèque «jQuery»

Nous allons maintenant passer par chacune des deux approches une par une!

Méthode 1: Créez une boîte d'alerte personnalisée en JavaScript à l'aide de la bibliothèque SweetAlert

SweetAlert est une bibliothèque JavaScript utilisée pour personnaliser les alertes dans les applications Web et les sites Web à l'aide d'un bouton. Vous pouvez utiliser son "Sauter.feu()”Méthode pour créer une boîte à alerte et la personnaliser à l'aide de CSS. Cela peut être fait en spécifiant le «Réseau de livraison de contenu»(CDN) Lien de la bibliothèque SweetAlert dans le«”Tag pour y accéder.

Exemple

Dans l'exemple ci-dessous, nous chargerons le Fichier "jQuery" et "CDN" Fichier dans nos balises de script comme suit:

Maintenant, nous appliquerons CSS sur le bouton. Son style inclut le «rembourrage«Ce qui définira la zone globale de bouton sur 15px et«alignement de texte«Alignera le texte au centre:

Ensuite, créez un "bouton»Nommé Activer Activer le boîtier d'alerte personnalisé qui déclenchera le boîtier d'alerte et attribuera«showAlert«Comme son identifiant qui sera accessible par la fonction JavaScript:

Enfin, accédez à l'ID de bouton spécifié et appliquez le «Cliquez sur()«Méthode dessus. En conséquence, lorsque le bouton est cliqué, le «Sauter.feu()»La méthode renvoie le texte correspondant dans une boîte d'alerte:

La sortie de l'implémentation ci-dessus en résultera comme suit:

Méthode 2: Créez une boîte d'alerte personnalisée en JavaScript à l'aide de la bibliothèque jQuery

JQuery est une bibliothèque JavaScript qui rend la gestion des événements beaucoup plus simple à implémenter avec une API facile à utiliser. Vous pouvez l'utiliser pour obtenir l'ID et la classe de la boîte d'alerte et leur appliquer différentes méthodes pour créer une boîte d'alerte personnalisée.

L'exemple ci-dessous explique le concept déclaré.

Exemple

Tout d'abord, nous chargerons la bibliothèque JavaScript "Jquery"Dans notre programme:

Maintenant, initialisez le «Div Id», «Div Class» et «Button Class» Dans le fichier html:

Dans l'étape ci-dessous, nous inclurons un bouton nommé «Activer la boîte d'alerte personnalisée". Il fonctionnera de telle manière que lorsque le bouton sera cliqué, le "sur clic»L'événement déclenchera le«showAlert ()" méthode:

Après cela, nous définirons la fonction showAlert () qui accepte deux arguments. Dans son corps, nous accéderons à l'ID div, récupérerons le message de la classe div et la classe de bouton. Le "texte()«La méthode renverra le contenu texte du message, et le« «délier()»La méthode supprimera les gestionnaires d'événements du message. Lorsque son bouton est cliqué, la boîte d'alerte se cachera. Enfin, le «Cliquez sur()«La méthode sera appliquée pour gérer le message sur le boîtier d'alerte:

Style la boîte d'alerte personnalisée pour la rendre attrayante:

Sortir

Nous avons discuté de différentes méthodes créatives pour créer une boîte d'alerte personnalisée dans JavaScript. Vous pouvez appliquer l'une des méthodes en fonction de votre exigence.

Conclusion

Pour créer une boîte d'alerte personnalisée en JavaScript, vous pouvez utiliser le «Bibliothèque SweetAlert, qui comprend un «CDN«Fichier pour activer le«Sauter.feu()«Méthode, et«Jquery»La bibliothèque, qui chargera la bibliothèque jQuery dans le projet, récupérera divers attributs de la boîte d'alerte et appliquera différentes fonctionnalités sur la boîte d'alerte. Cet article a expliqué les méthodes de création de boîtes d'alerte personnalisées à l'aide de JavaScript.