Créer une question Oui/Non en Javascript

Lorsque l’on construit des applications web, l’interaction utilisateur est essentielle pour créer une expérience fluide. Un scénario courant auquel les développeurs sont confrontés est la nécessité de poser une question Oui/Non aux utilisateurs. Cependant, la fonction standard confirm() en Javascript, bien que fonctionnelle, ne propose que des boutons OK/Annuler. Alors, que peut-on faire pour créer une boîte modale plus adaptée qui présente aux utilisateurs des options claires Oui/Non ?

Les limites des boîtes modales intégrées

Javascript propose quelques boîtes modales intégrées : alert, confirm et prompt. Cependant, aucune de ces options ne fournit un choix explicite Oui/Non. Voici un aperçu rapide de ces options :

• alert() : Affiche un message à l’utilisateur avec un bouton OK. Utile pour les notifications, mais ne pose pas de questions.
• confirm() : Pose une question oui/non et renvoie un booléen (true ou false). Cependant, elle utilise des boutons OK/Annuler au lieu de Oui/Non.
• prompt() : Permet la saisie de l’utilisateur mais n’est pas adaptée aux interactions oui/non et ne dispose que de boutons OK/Annuler.

Ces fonctions intégrées ne peuvent pas répondre à vos besoins spécifiques, ce qui nous amène à explorer des solutions personnalisées.

Solutions de pop-up modal personnalisées

Pour créer une invite de question Oui/Non, de nombreux développeurs optent pour des bibliothèques tierces qui permettent des boîtes de dialogue plus personnalisables. Une de ces solutions est ModalBox. Voici un aperçu rapide de la façon de l’implémenter :

Utilisation de ModalBox

1. Installation : Tout d’abord, incluez ModalBox dans votre projet. Vous pouvez trouver la bibliothèque sur GitHub ici.

2. Structure HTML : Configurez votre format HTML de boîte modale. Voici un exemple d’une structure simple pour votre modal :

   <div id="myModal" class="modal">
       <div class="modal-content">
           <span class="close">&times;</span>
           <p>Êtes-vous sûr de vouloir continuer ?</p>
           <button id="yesButton">Oui</button>
           <button id="noButton">Non</button>
       </div>
   </div>
   

3. Style de la modale : N’oubliez pas d’ajouter des styles à votre modale pour une meilleure expérience utilisateur. Voici un exemple simple de CSS :

   .modal {
       display: none; 
       position: fixed; 
       z-index: 1; 
       left: 0;
       top: 0;
       width: 100%; 
       height: 100%;
       overflow: auto; 
       background-color: rgb(0,0,0);
       background-color: rgba(0,0,0,0.4);
   }
   
   .modal-content {
       background-color: #fefefe;
       margin: 15% auto; 
       padding: 20px;
       border: 1px solid #888;
       width: 80%;
   }
   

4. Fonctionnalité Javascript : Enfin, ajoutez le Javascript qui ouvrira la modale lorsqu’elle sera nécessaire et gérera les clics sur les boutons :

   document.getElementById('myModal').style.display = "block"; // Ouvrir la modal
   
   document.getElementById("yesButton").onclick = function() {
       console.log("L'utilisateur a cliqué sur Oui");
       // Ajoutez votre action pour "Oui" ici
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementById("noButton").onclick = function() {
       console.log("L'utilisateur a cliqué sur Non");
       // Ajoutez votre action pour "Non" ici
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementsByClassName("close")[0].onclick = function() {
       document.getElementById('myModal').style.display = "none"; 
   }
   

Conclusion

Créer une question personnalisable Oui/Non en Javascript est possible en utilisant des bibliothèques de boîtes modales plutôt que de se fier uniquement aux fonctions intégrées. Que vous optiez pour ModalBox ou une autre alternative, ces solutions personnalisées offrent une meilleure expérience utilisateur tout en améliorant l’interaction sur vos applications web.

Explorez les bibliothèques disponibles et choisissez celle qui s’adapte le mieux aux besoins de style et de fonctionnalités de votre projet, et bientôt vous pourrez engager les utilisateurs avec des questions Oui/Non claires et accessibles.