Les boîtes de confirmation, aussi appelées popups de confirmation, sont très utiles dans une application Web. Elle permettent de demander une confirmation à l'usager avant de procéder à une opération, par exemple la suppression de données.
La boîte de confirmation apparaîtra par-dessus la page Web sans en affecter le contenu puis elle disparaîtra dès que l'usager aura cliqué sur un de ses boutons.
Je vous présente ici une technique pour effectuer la confirmation en JavaScript pur sans aucune bibliothèque externe. En fait, vous créerez votre propre bibliothèque avec le code que je vous fournis.
La boîte de confirmation sera affichée lorsque l'usager cliquera sur un lien <a href> flanqué d'une classe CSS de votre choix.
En prime, je vous propose du code qui permet également d'afficher une boîte popup pendant 3 secondes.
Pour faire apparaître une boite popup, vous aurez besoin de ces fichiers :
Pour que les fichiers requis soient chargés, il faut ajouter ces balises HTML.
Les balises pour le CSS doivent être placées dans la zone <head>.
Les balises pour le JavaScript seront également placées dans <head> mais elle devront être accompagnées de l'attribut defer.
<head>
...
<link rel="stylesheet" href="ma-bibliotheque-popup/style.css" />
...
<script src="ma-bibliotheque-popup/script.js" defer></script>
<script src="js/confirmation-suppression.js" defer></script>
</head>
La bibliothèque s'occupera de générer le code HTML de la boîte de confirmation.
De plus, elle utilisera une astuce intéressante qui consiste à récupérer l'URL dans l'attribut href du lien qui a lancé l'affichage de la boîte de confirmation.
Lorsque l'usager cliquera sur le bouton Oui, le contrôle sera redirigé vers cet URL.
/**
* Affiche la boîte de confirmation.
* @author Christiane Lagacé <christianelagace.com>
*
* @param {String} question.
* @param {String} href URL de la page vers laquelle le traitement sera transféré si on clique sur Oui.
*/
function afficherPopupConfirmation(question, href) {
// au cas où une boîte aurait déjà été générée
effacerBoite();
const divOverlay = document.createElement("div");
divOverlay.onclick = effacerSiClickEnDehors;
divOverlay.classList.add("mon-popup-confirmation-overlay");
const divBoite = document.createElement("div");
divBoite.classList.add("mon-popup-confirmation");
divOverlay.appendChild(divBoite);
const divQuestion = document.createElement("div");
divQuestion.innerHTML = question;
divQuestion.classList.add("question");
divBoite.appendChild(divQuestion);
const boutonOui = document.createElement("button");
boutonOui.innerHTML = "Oui";
boutonOui.dataset.href = href;
boutonOui.classList.add("button");
boutonOui.classList.add("gauche");
boutonOui.onclick = redirigerVersHref;
divBoite.appendChild(boutonOui);
const boutonNon = document.createElement("button");
boutonNon.innerHTML = "Non";
boutonNon.classList.add("button");
boutonNon.classList.add("droite");
boutonNon.onclick = effacerBoite;
divBoite.appendChild(boutonNon);
document.body.appendChild(divOverlay);
}
/**
* Retrouve l'attribut href du lien qui a mené à l'affichage de la boîte de confirmation.
* @author Christiane Lagacé <christianelagace.com>
*
* @param {Event} event.
*
* @return {string} Valeur de l'attribut href ou "" s'il n'y en avait pas.
*/
function retrouverHrefLien(event) {
let href = "";
const lien = event.target;
if (lien != null) {
href = lien.getAttribute("href") || "";
}
return href;
}
/**
* Redirige vers la page qui correspond à l'attribut href ou recharge la page actuelle si href est à blanc.
* @author Christiane Lagacé <christianelagace.com>
*
* @param {Event} event.
*/
function redirigerVersHref(event) {
const bouton = event.target;
let href = "";
if (bouton != null) {
// retrouve l'attribut data-href du bouton
href = bouton.dataset.href || "";
}
if (href != "") {
// affiche la page de l'attribut href
window.location.href = href;
}
else {
// réaffiche la page actuelle
window.location.reload();
}
}
/**
* Affiche une boîte popup pendant 3 secondes.
* @author Christiane Lagacé <christianelagace.com>
*
* @param {String} message.
* @param {Number} secondes. Durée en secondes. Défaut : 3
*/
function afficherPopup3Secondes(message, secondes) {
// valeur par défaut de la durée
if(secondes === undefined) {
secondes = 3;
}
// au cas où une boîte aurait déjà été générée
effacerBoite();
const divOverlay = document.createElement("div");
divOverlay.onclick = effacerSiClickEnDehors;
divOverlay.classList.add("mon-popup-confirmation-overlay");
const divBoite = document.createElement("div");
divBoite.classList.add("mon-popup-confirmation");
divOverlay.appendChild(divBoite);
const divMessage = document.createElement("div");
divMessage.innerHTML = message;
divMessage.classList.add("message");
divBoite.appendChild(divMessage);
document.body.appendChild(divOverlay);
setTimeout(function () {
effacerBoite();
}, secondes * 1000);
}
/**
* Efface la boîte de confirmation
* @author Christiane Lagacé <christianelagace.com>
*/
function effacerBoite() {
document.querySelectorAll('div.mon-popup-confirmation-overlay').forEach(e => e.remove());
}
/**
* Efface la boîte de confirmation si l'usager clique sur le overlay en dehors de la division interne.
* @author Christiane Lagacé <christianelagace.com>
*
* @param {Event} event.
*/
function effacerSiClickEnDehors(event) {
const overlay = document.getElementsByClassName('mon-popup-confirmation-overlay');
const popup = document.getElementsByClassName('mon-popup-confirmation');
if (overlay.length > 0 && popup.length > 0) {
// il ne peut jamais y avoir plus d'une boîte de confirmation puiqu'on détruit les existantes avant d'en créer une nouvelle
if (event.target != popup[0]) {
effacerBoite();
}
}
}
Je vous propose une feuille de style minimaliste pour la boîte de confirmation. À vous d'ajouter les styles pour l'obtention d'une boîte qui répond à vos besoins.
.mon-popup-confirmation-overlay {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.mon-popup-confirmation {
position: absolute;
background-color: white;
color: #3c3c3c;
border: #c3c3c3 solid 1px;
border-radius: 8px;
padding: 10px 20px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
}
.mon-popup-confirmation .question {
font-size: 1.1em;
}
.mon-popup-confirmation button.gauche {
margin: 10px 5px 10px 0;
}
.mon-popup-confirmation button.droite {
margin: 10px 0 10px 5px;
}
Le fichier propre à votre projet contiendra du code semblable à celui-ci.
// associe la fonction confirmerSuppression() au clic sur un lien
// il est nécessaire d'utiliser l'événement DOMContentLoaded seulement si le script n'a pas été chargé avec l'attribut defer
document.addEventListener("DOMContentLoaded", function(event) {
// l'événement doit provenir de la balise <a> qui contient l'attribut href
// ajuster le sélecteur selon votre projet
let liensConfirmation = document.querySelectorAll("a.confirmation");
for (let lienConfirmation of liensConfirmation) {
lienConfirmation.onclick = afficherBoiteConfirmation;
}
});
/**
* Fait apparaître une boîte de confirmation.
* @author Christiane Lagacé <christianelagace.com>
*
* @param {Event} event.
*
* @return {type} Return value description.
*/
function afficherBoiteConfirmation(event) {
// Aucune soumission tant que l'usager n'a pas confirmé.
event.preventDefault();
const href = retrouverHrefLien(event);
afficherPopupConfirmation("Désirez-vous vraiment supprimer cet item?", href);
}
▼Publicité
