retour au cours

Formulaire modal

importance: 5

Créez une fonction showPrompt(html, callback) qui montre un formulaire avec le message html, un champ de saisie et des boutons OK/CANCEL.

  • Un utilisateur doit taper quelque chose dans un champ de texte et appuyer sur Enter ou sur le bouton OK, puis callback(value) est appelé avec la valeur saisie.
  • Sinon, si l’utilisateur appuie sur Esc ou CANCEL, alors callback(null) est appelé.

Dans les deux cas, cela met fin au processus de saisie et supprime le formulaire.

Conditions:

  • Le formulaire doit être au centre de la fenêtre.
  • Le formulaire est modal. En d’autres termes, aucune interaction avec le reste de la page n’est possible tant que l’utilisateur ne la ferme pas.
  • Lorsque le formulaire est affiché, le focus doit être à l’intérieur de <input> pour l’utilisateur.
  • Les touches Tab/Shift+Tab devraient déplacer le focus entre les champs du formulaire, ne pas lui permettre de partir pour d’autres éléments de la page.

Exemple d’utilisation:

showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});

Une démo dans l’iframe:

P.S. Le document source contient HTML/CSS pour le formulaire avec un positionnement fixe, mais c’est à vous de le rendre modal.

Open a sandbox for the task.

Une fenêtre modale peut être implémentée en utilisant un <div id="cover-div"> semi-transparent qui couvre toute la fenêtre, comme ceci:

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}

Parce que la <div> couvre tout, il obtient tous les clics, pas la page en dessous.

Nous pouvons également empêcher le défilement de la page en définissant body.style.overflowY ='hidden'.

Le formulaire ne doit pas être dans<div>, mais à côté, car nous ne voulons pas qu’il ait opacity.

Ouvrez la solution dans une sandbox.