Fade message

Fade message test

by roge roge

HTML

<div id="Message">
   <H1> Information </H1>
   <label>voici un message</label>
   <a class='ClosePopUp' href="#" title="Fermer la fenêtre" onclick="showMessagePane(false, 'Message')"> X </a>)
</div>

CSS

.ClosePopUp {
   position: absolute;
   top: 4px;
   right: 4px;
   text-align: center;
   font-weight: 700;
   padding: 3px 6px;
   margin: 0 0 0 6px;
   color: #fff;
   background-color: #C00;
   border-radius: 4px;
   text-decoration: none;
}

#Message {
   display: none;
   max-width: 300px;
   position: absolute;
   top: 15px;
   right: 15px;
   z-index: 100;
   color: #232;
   padding: 10px 20px 26px 20px;
   background-color: #afa;
   border: 1px solid #686;
   border-radius: 4px;
   opacity: 0.9;
}

#Message label {
   color: black;
   font-size: 14px;
}

JavaScript

function showMessagePane(bool, idMessage, delay = 3000) {
   var msg = document.getElementById(idMessage);
   if (!msg)
      alert('ERREUR showMessagePane: l\'élément "Message" n\'existe pas!');
   else {
      if (bool) {
         msg.style.display = "block";
         // Fermeture automatique
         window.setTimeout(fadeout, delay, msg);
      } else {
         msg.style.display = "none";
      }
   }
}

function fadeout(element) {
   var op = 1; // initial opacity
   if (!element)
      alert('ERREUR fadout: l\'élément "' + element + '" n\'existe pas!');
   else {
      var timer = setInterval(function() {
         if (op <= 0.1) {
            clearInterval(timer);
            element.style.display = 'none';
         }
         element.style.opacity = op;
         element.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op -= op * 0.1;
      }, 50);
   }
}

showMessagePane(true, 'Message');