Comment créer une boîte d'alerte ou une fenêtre contextuelle JavaScript

Les boîtes de dialogue (ou boîtes de dialogue) sont des fenêtres modales utilisées pour notifier ou avertir l'utilisateur, ou pour obtenir une entrée de l'utilisateur.

Les fenêtres contextuelles empêchent l'utilisateur d'accéder à d'autres aspects d'un programme jusqu'à ce que la fenêtre contextuelle soit fermée, elles ne doivent donc pas être surutilisées.

Il existe trois types différents de méthodes contextuelles utilisées dans JavaScript: window.alert (), window.confirm () et window.prompt ().

Alerte

La méthode d'alerte affiche les messages qui n'exigent pas que l'utilisateur saisisse une réponse. Une fois cette fonction appelée, une boîte de dialogue d'alerte apparaît avec le message spécifié (facultatif). Les utilisateurs devront confirmer le message avant que l'alerte ne disparaisse.

Exemple:

window.alert("Welcome to our website");

Exemple d'alerte MDN

Confirmer

La méthode de confirmation est similaire à window.alert(), mais affiche également un bouton d'annulation dans la fenêtre contextuelle. Les boutons renvoient des valeurs booléennes: true pour OK et false pour Cancel.

Exemple:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
Exemple de confirmation MDN

Rapide

La méthode d'invite est généralement utilisée pour obtenir une entrée de texte de l'utilisateur. Cette fonction peut prendre deux arguments, tous deux facultatifs: un message à afficher à l'utilisateur et une valeur par défaut à afficher dans le champ de texte.

Exemple:

var age = prompt('How old are you?', '100');

Exemple d'invite MDN

Autres options de conception:

Si vous n'êtes pas satisfait des fenêtres contextuelles JavaScript par défaut, vous pouvez les remplacer dans diverses bibliothèques d'interface utilisateur. Par exemple, SweetAlert fournit un bon remplacement pour les modaux JavaScript standard. Vous pouvez l'inclure dans votre HTML via un CDN (Content Delivery Network) et commencer à l'utiliser.

La syntaxe est comme telle: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

Le code ci-dessus produira la fenêtre contextuelle suivante:

Exemple SweetAlert

SweetAlert n'est en aucun cas le seul substitut aux modaux standard, mais il est propre et facile à mettre en œuvre.

Plus d'information:

  • MDN window.alert ()
  • MDN window.confirm ()
  • MDN window.prompt ()