Creer une boite de dialogue qui disparait seule avec JQuery

An article by admin    2 Comments

Voilà un petit tutorial pour créer une une boite de dialogue qui apparait avec la page et qui disparait au bout d’un certain temps.

Définissons tout d’abord le contenu de notre box :

<div class="messageBox">Votre session est expirée</div>

Maintenant que notre box est définie, ajoutons lui un peu de style :

.messageBox {
	width:150px;
	padding:10px;
	border:1px solid #666;
	position:fixed; right:2%;top:2%;
	z-index:999;
	-webkit-border-radius: 6px; -moz-border-radius: 6px;
}

Le CSS est plutôt explicite mais détaillons un peu :

• la largeur, le padding et le border ne sont qu’affaire de goût. Ils permettent de mettre en valeur la box et d’avoir un message clair séparé du reste de l’information.
• il est important que la position soit définie comme fixed. Nous plaçons donc la fenêtre à 2% du haut et 2% de la droite.
• z-index qui permet de positionner cette fenêtre par dessus tout le reste des éléments de la fenêtre.
• et enfin, un tout petit effet CSS3 qui fonctionne partout excepter sur… IE ! et qui permet d’avoir des angles arrondis.

Définissons maintenant le plus important : le javascript !

<script src="http://code.jquery.com/jquery-latest.js"></script>

On inclut d’abord la dernière version de jquery

<script>
	$(document).ready(function(){
		setTimeout(function() {
			$('.messageBox').fadeOut('fast');
		}, 1000); // <-- temps en millisecondes
	});
</script>

ce petit bout de javascript permet simplement d’utiliser la fonction fadeout sur la div de la box au bout de 1000 millisecondes. Jquery dispose d’autres effets de transition, n’hésitez pas à en user.