Nous pouvons utiliser une boîte contextuelle pour afficher un message contextuel aux utilisateurs de l'application. Nous découvrirons différents types de popups JavaScript dans ce didacticiel.
Trois types différents de boîtes contextuelles sont fournis dans le JavaScript ci-dessous.
Boîte d'alerte
Boîte de confirmation
Boîte d'invite
Ci-dessous, nous découvrirons toutes les boîtes pop-up une par une.
Nous pouvons utiliser la méthode window.alert() pour afficher la boîte d'alerte. Il affiche simplement le message dans une boîte contextuelle.
Lorsque nous devons fournir un message à l'utilisateur, nous pouvons utiliser la boîte d'alerte. Par exemple, lorsqu'un utilisateur se connecte à l'application, celui-ci affiche un message du type « Vous vous êtes connecté avec succès ».
Les utilisateurs peuvent afficher des boîtes d'alerte en JavaScript en suivant la syntaxe suivante.
alert(message)
Message- Il s'agit d'un message qui s'affiche dans la zone d'alerte.
Dans cet exemple, lorsque l'utilisateur clique sur le bouton, nous appellerons la fonction showAlert(). La fonction showAlert() utilise la méthode alert() pour afficher une boîte d'alerte.
En sortie, l'utilisateur peut observer que lorsque l'on appuie sur le bouton, il affiche la boîte d'alerte avec le message passé en paramètre. Lorsque l'on appuie sur le bouton "OK" dans la boîte d'alerte, il disparaît.
<html>
<body>
<h2> Showing the alert message using the <i> alert box. </i> </h2>
<button onclick = "showAlert()"> Show Alert Message </button>
</body>
<script>
// function to show alert
function showAlert() {
alert("This is the important message");
}
</script>
</html>
Lorsque nous avons besoin d'une confirmation de l'utilisateur, nous pouvons utiliser la boîte de confirmation. Par exemple, nous devons obtenir la confirmation de l'utilisateur avant de supprimer certaines données importantes.
Nous pouvons utiliser la méthode window.confirm() pour afficher la boîte de confirmation. La boîte de confirmation contient deux boutons avec le texte « OK » et « Annuler ». Renvoie false si l'utilisateur a appuyé sur le bouton d'annulation ; sinon, true.
Les utilisateurs peuvent afficher la boîte de confirmation en JavaScript en suivant la syntaxe suivante.
confirm(message);
Message- Il s'agit d'un message de confirmation qui apparaît dans la boîte de confirmation.
Il renvoie des valeurs booléennes vraies et fausses selon que l'utilisateur a appuyé sur le bouton "OK" ou "Annuler".
Dans cet exemple, nous utilisons la méthode confirm() de l'objet window pour afficher la boîte de confirmation. De plus, nous affichons différents messages à l'utilisateur sur l'écran selon qu'il appuie sur le bouton OK ou Annuler de la boîte de confirmation.
<html>
<body>
<h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
<p id = "output"> </p>
<button onclick = "showConfirm()"> Show Confirm box </button>
</body>
<script>
let message = "Kindly confirm once by pressing the ok or cancel button!";
// function to show confirm box
function showConfirm() {
// showing the confirm box with the message parameter
let returnValue = confirm(message);
let output = document.getElementById("output");
// According to the returned boolean value, show the output
if (returnValue) {
output.innerHTML += "You pressed the ok button.";
} else {
output.innerHTML += "You pressed the cancel button.";
}
}
</script>
</html>
La boîte de dialogue est la troisième façon d'afficher des messages contextuels en JavaScript. Les boîtes d'invite sont des versions avancées d'alert() et des boîtes de confirmation. Il affiche un message dans une boîte et accepte les entrées de l'utilisateur. De plus, il contient des boutons OK et Annuler pour soumettre les valeurs d'entrée.
Les utilisateurs peuvent utiliser la zone d'invite pour obtenir la saisie de l'utilisateur en JavaScript selon la syntaxe suivante.
prompt(message, placeholder);
Nous avons appelé la méthode static prompt() dans la syntaxe ci-dessus.
message - Il s'agit d'un message affiché au-dessus de la zone de saisie.
Placeholder- Il s'agit du texte qui s'affiche dans la zone de saisie.
Si l'utilisateur appuie sur le bouton OK, renvoie la valeur d'entrée, sinon elle est vide.
Dans cet exemple, nous avons créé la fonction takeInput(), qui affiche une info-bulle à l'utilisateur. Nous utilisons une boîte de dialogue pour obtenir le nom saisi par l'utilisateur.
Lorsque l'utilisateur appuie sur le bouton OK après avoir entré la valeur d'entrée, nous afficherons la saisie de l'utilisateur à l'écran.
<html>
<body>
<h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
<p id = "output"> </p>
<button onclick = "takeInput()"> Show Prompt box </button>
</body>
<script>
let message = "Enter your name";
// function to take input using the prompt box
function takeInput() {
// showing the prompt with the message parameter
let returnValue = prompt(message, "Shubham");
let output = document.getElementById("output");
if (returnValue) {
output.innerHTML += "Your good name is " + returnValue;
} else {
output.innerHTML +=
"You pressed the cancel button, or you entered the null value";
}
}
</script>
</html>
Nous avons examiné les trois fenêtres contextuelles différentes avec des exemples dans ce didacticiel. Si nous avons seulement besoin d'afficher un message, nous pouvons utiliser une boîte d'alerte, si nous avons seulement besoin d'une confirmation de l'utilisateur, nous devons utiliser une boîte de confirmation. Si nous devons saisir une valeur ou confirmer une valeur dans une boîte contextuelle, nous devons utiliser une boîte de dialogue.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Prix d'échange OuYi en USD
Quelle est la différence entre ibatis et mybatis
Comment convertir Excel en VCF
Comment résoudre le problème de l'absence d'accès à Internet lorsque l'ordinateur est connecté au wifi
Comment activer le service de stockage cloud
Quels sont les outils du serveur de fichiers réseau ?
propriété de gradient linéaire
partage de photos.db
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
