WhatZeWeb

Par défaut, JavaScript propose trois types de pop-up : les boîtes d’alerte, de confirmation et de dialogue.

 

Voyons d’abord ces éléments  

En général, les alertes sont utilisées pour passer une information à l’utilisateur, et s’assurer que celle-ci est bien prise en compte par cet utilisateur.

Il devra cliquer sur le bouton “OK” pour poursuivre.

Les boîtes de confirmation, comme leur nom nous l’indique, servent à nous assurer que l’utilisateur confirme une action. En plus du bouton “OK” des boîtes d’alerte, un bouton “Annuler” est affiché.

Si l’utilisateur clique sur “OK”, alors la boîte retournera true, sinon, false nous sera renvoyé.

Enfin, les boîtes de dialogues vont nous être utiles si nous avons besoin que l’utilisateur saisisse une valeur.

Testons-les. On crée d'abord les boutons côté HTML, qui nous serviront de déclencheurs :

<!-- Boîte d'alerte -->
<button id="alert-box">Cliquez pour afficher une boîte d'alerte</button>

<!-- Boîte de confirmation -->
<button id="confirm-box">Cliquez pour afficher une boîte de confirmation</button>


<!-- Boîte de dialogue -->
<button id="prompt-box">Cliquez pour afficher une boîte de dialogue</button>

 

Puis on gère le fonctionnement du côté du code JavaScript :

// Affichage boîte d'alerte
document.getElementById('alert-box').addEventListener('click', function() {
  alert('Je suis une boîte d\'alerte !');
});

// Affichage boîte de confirmation
document.getElementById('confirm-box').addEventListener('click', function() {
  if (confirm('Je suis une boîte de confirmation !')) {
    console.log('Confirmé !')
  } else {
    console.log('Annulé !');
  }
});

// Affichage boîte de dialogue
document.getElementById('prompt-box').addEventListener('click', function() {
  var text = prompt('Je suis une boîte de confirmation !\nQuel est votre prénom ?');
  
  if (text === null) {
    console.log('L\'utilisateur a cliqué sur "Annuler".');
  } else if (text === "") {
    console.log('L\'utilisateur n\'a saisi aucune valeur.');
  } else {
    console.log(text);
  }
});

Comme vous l’aurez constaté, ces pop-up sont pratiques, mais peu (voire pas) personnalisables.

 

Voyons à présent comment créer des boîtes “sur-mesure”, en utilisant des boîtes modales.

Tout d’abord, comme précédemment, nous allons mettre en place les boutons côté HTML, qui nous servirons à afficher nos pop-up :

<!-- Boîte d'alerte -->
<button id="custom-alert-box-button">Cliquez pour afficher une boîte d'alerte</button>

<!-- Boîte de confirmation -->
<button id="custom-confirm-box-button">Cliquez pour afficher une boîte de confirmation</button>

<!-- Boîte de dialogue -->
<button id="custom-prompt-box-button">Cliquez pour afficher une boîte de dialogue</button>

 

Et donnons-leur un peu de style, en CSS :

button {
   background-color: #0090c5;
   border: none;
   padding: 1em;
   color: white;
   margin: 1em;
   border-radius: 5px;
}

 

Occupons-nous à présent de leur fonctionnement, tout d’abord, créons une simple boîte d’alerte :

var modalContainer = document.createElement('div');
modalContainer.setAttribute('id', 'modal');

var customAlertBox = document.createElement('div');
customAlertBox.className = 'custom-box';
customAlertBox.innerHTML = '<p>Je suis une boîte d\'alerte customisée !</p>';
customAlertBox.innerHTML += '<button id="modal-close">OK</button>';
modalContainer.appendChild(customAlertBox);

// Affichage boîte d'alerte
document.getElementById('custom-alert-box-button').addEventListener('click', function() {
      
    document.body.appendChild(modalContainer);

    document.getElementById('modal-close').addEventListener('click', function() {
       while (modalContainer.hasChildNodes()) {
           modalContainer.removeChild(modalContainer.firstChild);
       }
       document.body.removeChild(modalContainer);

    });

});

Voyons ensemble ce que fait ce code.

Tout d’abord, nous créons un “conteneur” pour notre modale (div#modal), auquel nous appliquerons un peu de style juste après pour qu’il occupe tout l’espace, et recouvre ainsi toute notre page.

Ensuite, nous créons la boîte en elle-même : ici, une simple div, à laquelle nous attribuons une classe, qui contient notre texte et notre bouton et que nous insérons dans notre conteneur précédemment créé.

Au clic sur le bouton “custom-alert-box-button”, on ajoute ce conteneur comme nouveau noeud enfant du body de notre page, ce qui va afficher notre pop-up.

Nous en profitons pour ajouter un événement sur le bouton de fermeture, afin qu’au clic sur celui-ci, tout ce qui contenu dans notre div#modal soit supprimé, et que celle-ci soit à son tour supprimée du body.

Voici quelques lignes de CSS afin d’améliorer l’affichage de notre pop-up :

.custom-box {
   border: 2px solid grey;
   text-align: center;
   padding: 10px;
   width: fit-content;
   background-color: white;
   margin: auto;
}

#modal {
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
}

 

Passons à présent à notre boîte de confirmation.

Compte tenu du fait que nous créons nos boîtes directement en JavaScript, il n’est pas nécessaire de modifier notre code HTML, ni notre code CSS puisque le conteneur sera toujours le même, et, dans notre exemple, les mêmes styles seront appliqués à tous les types de pop-up.

Concentrons-nous donc sur le code JavaScript :

var modalContainer = document.createElement('div');
modalContainer.setAttribute('id', 'modal');

var customConfirmBox = document.createElement('div');
customConfirmBox.className = 'custom-box';
customConfirmBox.innerHTML = '<p>Je suis une boîte de confirmation customisée !</p>';
customConfirmBox.innerHTML += '<button id="modal-confirm">Confirmer</button>';
customConfirmBox.innerHTML += '<button id="modal-close">Annuler</button>';

modalContainer.appendChild(customConfirmBox);

// Affichage boîte de la boîte de confirmation
document.getElementById('custom-confirm-box-button').addEventListener('click', function() {   
    document.body.appendChild(modalContainer);

    document.getElementById('modal-confirm').addEventListener('click', function () {
        console.log('Confirmé !');
        while (modalContainer.hasChildNodes()) {
            modalContainer.removeChild(modalContainer.firstChild);
        }
        document.body.removeChild(modalContainer);
    });

    document.getElementById('modal-close').addEventListener('click', function() {
        while (modalContainer.hasChildNodes()) {
            modalContainer.removeChild(modalContainer.firstChild);
        }
        document.body.removeChild(modalContainer);

    });
});

Rien de très nouveau ici par rapport à notre boîte d’alerte. En revanche, on se rend compte d’un problème dans notre code : la répétition !

Nous allons donc refactoriser un peu celui-ci :

var modalContainer = document.createElement('div');
modalContainer.setAttribute('id', 'modal');

var customBox = document.createElement('div');
customBox.className = 'custom-box';

// Affichage boîte d'alerte
document.getElementById('custom-alert-box-button').addEventListener('click', function() {
    customBox.innerHTML = '<p>Je suis une boîte d\'alerte customisée !</p>';
    customBox.innerHTML += '<button id="modal-close">OK</button>';
    modalShow();
});

// Affichage boîte de confirmation
document.getElementById('custom-confirm-box-button').addEventListener('click', function() {
    customBox.innerHTML = '<p>Je suis une boîte de confirmation customisée !</p>';
    customBox.innerHTML += '<button id="modal-confirm">Confirmer</button>';
    customBox.innerHTML += '<button id="modal-close">Annuler</button>';
    modalShow();
});

function modalShow() {
    modalContainer.appendChild(customBox);
    document.body.appendChild(modalContainer);

    document.getElementById('modal-close').addEventListener('click', function() {
        modalClose();
    });

    if (document.getElementById('modal-confirm')) {
        document.getElementById('modal-confirm').addEventListener('click', function () {
           console.log('Confirmé !');
           modalClose();
        });
    }
}

function modalClose() {
    while (modalContainer.hasChildNodes()) {
        modalContainer.removeChild(modalContainer.firstChild);
    }
    document.body.removeChild(modalContainer);
}

Regardons ensemble ce qui a été refactorisé ici :

Nous avons donné un nom générique à nos pop-up, “custom-box”, et leur contenu est créé et ajouté en fonction du bouton sur lequel nous avons cliqué.

Nous avons également déplacé le code permettant d’ouvrir et de fermer les boîtes, dans deux fonctions : modalShow() et modalClose().

 

Enfin, ajoutons notre boîte de dialogue personnalisée :

// Affichage boîte de dialogue
document.getElementById('custom-prompt-box-button').addEventListener('click', function() {
    customBox.innerHTML = '<p>Je suis une boîte de dialogue customisée !</p>';
    customBox.innerHTML += '<input type="text" id="modal-prompt" placeholder="Votre nom"/><br/>'
    customBox.innerHTML += '<button id="modal-submit">Valider</button>';
    customBox.innerHTML += '<button id="modal-close">Annuler</button>';
    modalShow();
});

A la différence des deux premiers exemples, on trouve ici, en plus d’un texte et d’un ou deux boutons, un champ de formulaire.

Il nous faut également apporter une petite modification à notre fonction modalShow :

if (document.getElementById('modal-confirm')) {
   ...
} else if (document.getElementById('modal-submit')) {
   document.getElementById('modal-submit').addEventListener('click', function () {
       console.log(document.getElementById('modal-prompt').value);
       modalClose();
   });
}

 

Et voilà, nous avons des pop-up totalement personnalisables ! Vous pouvez retrouver son code sur CodePen.

Il m’est impossible de vous présenter toutes les possibilités dans ce tuto.

Au-delà des exemples présentés, on pourrait imaginer un affichage de pop-up lors d’autres événements que des clics sur certains boutons, un traitement plus avancé des données de l’input, voire pousser un peu plus loin la refactorisation (en créant un objet Modal, par exemple).

 

Sachez également que si vous préférez utiliser jQuery, il existe la méthode modal() pour vous simplifier cette tâche. Vous pouvez trouver plus d’infos sur cette page.

Et pour plus d’informations sur alert(), confirm() et prompt(), je vous invite à lire la documentation.