Fade in out message

Fade in out 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;
}
#Message	label {
	color: black;
	font-size: 14px;
}

JavaScript

function showMessagePane(bool, idMessage) {
	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
			var x = 1;  // initial step for opacity
			function opacity(x) {
				var y =
					- 9 * Math.pow(10, -9) * Math.pow(x, 6)
					+ 1 * Math.pow(10, -6) * Math.pow(x, 5)
					- 8 * Math.pow(10, -5) * Math.pow(x, 4)
					+ 0.0027 * Math.pow(x, 3)
					- 0.0448* Math.pow(x, 2)
					+ 0.3817 * x
					- 0.2718;
				if ( y > 1) return 1;
				else if (y < 0) return 0;
				else return y;
			}
			var timer = setInterval(function () {
				var opa = opacity(x);
				if (opa <= 0.01){
					msg.style.display = 'none';
					clearInterval(timer);
				}
				msg.style.opacity = opa;
				msg.style.filter = 'alpha(opacity=' + opa * 100 + ")";
				x += 1;
			}, 100);
		} else {
			msg.style.display = "none";
		}
	}
}

showMessagePane(true, 'Message');