Formulaire modal
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.
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.