JavaScript
Modals - Invites

Syntaxe

• alerte (message)
• confirmer (message)
• invite (message [, optionValue])
• impression()

Remarques

À propos des invites de l'utilisateur

Les invites utilisateur sont des méthodes faisant partie de l’ API d’application Web utilisée pour appeler les modaux du navigateur qui demandent une action de l’utilisateur, telle que la confirmation ou la saisie.

window.alert(message)

Afficher un popup modal avec un message à l'utilisateur.
Nécessite que l'utilisateur clique sur [OK] pour quitter.

alert("Hello World"); 

Plus d'informations ci-dessous dans "Using alert ()".

boolean = window.confirm(message)

Afficher une fenêtre contextuelle avec le message fourni.
Fournit les boutons [OK] et [Cancel] qui répondent respectivement avec une valeur booléenne true / false .

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Affiche une fenêtre contextuelle avec le message fourni et un champ de saisie avec une valeur pré-remplie facultative.
Retourne comme result la valeur d'entrée fournie par l'utilisateur.

prompt("Enter your website address", "http://");

Plus d'informations ci-dessous dans "Utilisation de prompt ()".

window.print()

Ouvre un modal avec les options d'impression du document.

print();

Invite persistante modale

Lorsque vous utilisez l' invite, l' utilisateur peut toujours cliquer sur Annuler et aucune valeur ne sera renvoyée.
Pour empêcher les valeurs vides et les rendre plus persistantes :

<h2>Welcome <span id="name"></span>!</h2>

<script>
// Persistent Prompt modal
var userName;
while(!userName) {
  userName = prompt("Enter your name", "");
  if(!userName) {
    alert("Please, we need your name!");
  } else {
    document.getElementById("name").innerHTML = userName;
  }
}
</script>

jsfiddle démo

Confirmer pour supprimer l'élément

Une façon d'utiliser confirm() consiste à effectuer des modifications destructives sur la page à l'aide d'une action de l'interface utilisateur, accompagnée d'une notification et d'une confirmation de l'utilisateur , par exemple avant de supprimer un message:

<div id="post-102">
  <p>I like Confirm modals.</p>
  <a data-deletepost="post-102">Delete post</a>
</div>
<div id="post-103">
  <p>That's way too cool!</p>
  <a data-deletepost="post-103">Delete post</a>
</div>

// Collect all buttons
var deleteBtn = document.querySelectorAll("[data-deletepost]");

function deleteParentPost(event) {
  event.preventDefault(); // Prevent page scroll jump on anchor click
  
  if( confirm("Really Delete this post?") ) {
    var post = document.getElementById( this.dataset.deletepost );
    post.parentNode.removeChild(post);
    // TODO: remove that post from database
  } // else, do nothing
  
}

// Assign click event to buttons
[].forEach.call(deleteBtn, function(btn) {
  btn.addEventListener("click", deleteParentPost, false);
});

jsfiddle démo

Utilisation de l'alerte ()

La méthode alert() de l'objet window affiche un message d' alerte avec un message spécifié et un bouton OK ou Annuler . Le texte de ce bouton dépend du navigateur et ne peut pas être modifié.

Syntaxe

alert("Hello world!");
// Or, alternatively...
window.alert("Hello world!");

Produit

Une boîte d'alerte est souvent utilisée si vous souhaitez vous assurer que les informations parviennent à l'utilisateur.

Remarque: La boîte d'alerte éloigne le focus de la fenêtre actuelle et force le navigateur à lire le message. N'abusez pas de cette méthode, car elle empêche l'utilisateur d'accéder à d'autres parties de la page tant que la boîte n'est pas fermée. Il arrête également l'exécution du code, jusqu'à ce que l'utilisateur clique sur OK . (en particulier, les temporisateurs définis avec setInterval() ou setTimeout() ne setInterval() pas non plus). La boîte d'alerte ne fonctionne que dans les navigateurs et sa conception ne peut pas être modifiée.

Valeur de retour

fonction d' alert ne renvoie aucune valeur

Utilisation de prompt ()

L'invite affichera une boîte de dialogue à l'intention de l'utilisateur demandant sa saisie. Vous pouvez fournir un message qui sera placé au-dessus du champ de texte. La valeur de retour est une chaîne représentant l'entrée fournie par l'utilisateur.

var name = prompt("What's your name?");
console.log("Hello, " + name);

Vous pouvez également transmettre prompt() un deuxième paramètre, qui sera affiché comme texte par défaut dans le champ de texte de l'invite.

var name = prompt('What\'s your name?', ' Name...');
console.log('Hello, ' + name);