1. Acceuil
  2. Cours
  3. Cours JavaScript
  4. Alert customisée

Créer un système d'alerte

Utiliser la fonction alert() peut sembler pratique en local pour nos tests, mais une fois en ligne cette alerte ne répond plus à la charte graphique et peut inciter le visiteur à quitter le site et ne plus jamais revenir.

Nous allons devoir créer notre propre alerte ce qui constituera une valeur ajoutée et ne gachera pas l'expérience du visiteur du site. Cette alerte customisé pourra à loisir être modifier avec du CSS.

Pour être opérationnelle, notre alerte doit pouvoir faire afficher un message, mais aussi gérer un évément au clique. Nous allons également créer 2 types d'alertes

  • une alerte basique pour faire office de notification qui se ferme en cliquant n'importe où sur la page
  • une servant de boîte de confirmation qui se ferme que si et seulement si l'utilisateur clique sur un bouton

L'overlay

Notre alerte va s'intégrer dans sur un block overlay afin que l'utilisateur cesse d'intéragir avec le site

Créer un overlay c'est utiliser la bonne vieille commande document.createElement()pour créer notre overlay et l'intégrer au body

  • function _alert(){
    • var overlay=document.createElement("div");
    • document.body.appendChild(overlay);
  • }

Parfait à present en appelant notre fonction, un bloc s'intégre en dessous. Maintenant nous allons lui assigner une classe pour indiquer qu'il s'agit d'un overlay.

  • function _alert(){
    • var overlay=document.createElement("div");
    • overlay.classList.add('overlay');
    • document.body.appendChild(overlay);
  • }

Il faut maintenant en CSS indiquer à quoi va ressembler cet overlay

  • .overlay{
    • position:fixed;
    • width:100vw;
    • height:100vh;
    • z-index:1000;/*Ansi il se placera au dessus de tout les éléments*/
    • background:#3338;/*Ainsi on continuera de voir le site*/
    • top:0;
  • }

A présent en appelant notre fonction d'alerte, un overlay s'intégre visuelement par dessus la page. Il faut maintenant nous assurer qu'il disparaisse lorsque l'on clique dessus

  • function _alert(){
    • var overlay=document.createElement("div");
    • overlay.classList.add('overlay');
    • overlay.onclick=function(){
      • this.remove();
    • }
    • document.body.appendChild(overlay);
  • }

alert basique

A présent nous allons créer un bloc qui s'intégrera sur notre overlay et contiendra notre message et aura une classe notif.

  • function _alert(msg){
    • var overlay=document.createElement("div");
    • overlay.classList.add('overlay');
    • overlay.onclick=function(){
      • this.remove();
    • }
    • var content=document.createElement("div");
    • content.classList.add("notif");
    • content.innerHTML="<span>"+msg+"</span>";
    • overlay.appendChild(content);
    • document.body.appendChild(overlay);
  • }

Pour finir il ne reste plus qu'à gérer le code CSS du container

  • .overlay .notif{
    • position:absolute;
    • width:1.8em;
    • aspect-ration:16/9;
    • background:#FFF;
    • top:25%;
    • left:45%;
    • display: flex;/*Anticiper les futurs ajouts*/
    • justify-content: space-around;
    • align-items: center;
    • padding: 5px;
    • flex-direction: column;
  • }

Voila votre alerte est faîte ! Elle est basique, à présent nous allons donner la possibilité de générer un événement au clique

Donc en plus de disparaître nous allons pouvoir faire autre chose.

Nous allons donc faire passer un 2ième paramètre, tester son assignation et le déclencher

  • function _alert(msg,onclose){
    • var overlay=document.createElement("div");
    • overlay.classList.add('overlay');
    • overlay.onclick=function(){
      • this.remove();
      • if(onclose!=undefined){
        • onclose.call();
      • }
    • }
    • var content=document.createElement("div");
    • content.classList.add("notif");
    • content.innerHTML="<span>"+msg+"</span>";
    • overlay.appendChild(content);
    • document.body.appendChild(overlay);
  • }

On pourra par exemple déclencher une alerte après avoir cliquer sur la notre.

    • _alert("nous allons déclencher une alerte navigateur",function(){
      • alert("c'est fait");
    • })

La confirm box

Pour créer notre confirm box nous allons créer une nouvelle fonction _confirm

Celle-ci va appeler notre fonction _alert et dans ce cas, se vera intégrer un bouton valider et ne disparaîtra qui si l'utilisateur clique dessus

  • function _confirm(msg,onclose){
      _alert(msg,onclose);
  • }

A présent nous devons modifier notre alert pour déterminer si elle est appelée par une autre fonction.

Pour cela nous allons nous servir de la méthode statique .caller pour vérifier si la fonction est appelée par _confirm et si c'est le cas, intégrer un bouton valider et empêcher l'évenement clique de l'overlay

  • function _alert(msg,onclose){
    • var overlay=document.createElement("div");
    • overlay.classList.add('overlay');
    • if(_alert.caller===null){
      • overlay.onclick=function(){
        • this.remove();
        • if(onclose!=undefined){
          • onclose.call();
        • }
      • }
    • }
    • var content=document.createElement("div");
    • content.classList.add("notif");
    • content.innerHTML="<span>"+msg+"</span>";
    • if (_alert.caller != null && _alert.caller.name === "_confirm") {
      • var btn = document.createElement("button");
      • btn.innerHTML="Valider"
      • btn.onclick=function(){
        • onclose.call();
        • overlay.remove();
      • }
    • }
    • overlay.appendChild(content);
    • document.body.appendChild(overlay);
  • }

Ne reste plus qu'à designer notre bouton

  • .notif button{
    • border:none;
    • background:#AA8;
    • padding: 5px;
    • align-self: end;
  • }

Voila nous avons à présent une fonction _alert qui peut s'intégrer au design du site et constituer une valeur ajoutée

Partager