CodeWebweb2

Popup non intrusive en Javascript+CSS

Je développais une application web et j’avais besoin d’informer de temps en temps l’utilisateur sur des retours de requêtes ajax ou autre. J’utilisais pour ça des popup de type « alert » en javascript. Mais au bout d’un moment je dois dire que je m’en suis lassé, car 1/ les alertes bloquent le site web qui les produit et 2/ obligent l’utilisateur à cliquer sur un bouton pour les fermer.

J’ai alors développé des « alertes » ou « popup » dites non intrusives, pour informer sans bloquer. L’idée c’est un peu la même que les infobulles Windows : un petit message qui apparaît en bas à gauche de l’écran et qui disparaît tout seul quelques instants plus tard.

Voici à quoi ressemblent les « popup » de http://whaller.com :

Pour les utiliser, rien de plus simple, il faut :

- popup.js, la librairie javascript
- popup.css, la feuille de style (que vous pouvez modifier pour ajuster les couleurs à votre site)
- et l’image ‘images/cross-small.png’ qui représente la petite croix rouge. Chemin à changer dans popup.js si nécessaire.

Pour l’utiliser, il faut d’abord placer ces deux lignes dans le head de votre page html :

<script type="text/javascript" src="js/popup.js"></script>
<link rel="stylesheet" type="text/css" href="css/popup.css" media="screen" />

L’appel à une popup se fait tout simplement de cette façon :

popup('ceci est une alerte non intrusive');
popup('texte','ceci est le titre');

On peut également régler le temps de « vie » du popup en rentrant un troisième argument (exprimé en secondes, 5 secondes par défaut) :

popup('texte','titre',15); # s'affichera pendant 15 secondes

Voici le code source :

popup.js :

var popup_number = 0;
var popup_bottom = 0;
function  popup(i__text,i__title,i__seconds){
	l__title = (typeof i__title == 'undefined') ? 'Info' : i__title;
	l__seconds = (typeof i__seconds == 'undefined') ? 5 : i__seconds;
	popup_number += 1;
	var popupid = "popup"+(new Date().getTime());
	$('body').append("<div id='"+popupid+"' class='popup' style='bottom:"+popup_bottom+"px'><h1>"+l__title+"<img popupid='"+popupid+"' class='imgpopup' src='images/cross-small.png'/></h1><p>"+i__text+"</p></div>");
	popup_bottom += parseInt($("#"+popupid).css('height'));
	$('#'+popupid).hide();
	$('#'+popupid).slideDown('normal',function(){
	});
	$('#'+popupid).click(function(){
		delete_popup(popupid);
	});
	setTimeout("delete_popup('"+popupid+"')", l__seconds*1000);
}

function delete_popup(popupid){
	popup_number -= 1;
	var last_height = parseInt($("#"+popupid).css('height'));
	var last_bottom = parseInt($("#"+popupid).css('bottom'));
	popup_bottom -= last_height;
	$('#'+popupid).slideUp('normal',function(){$('#'+popupid).remove();});
	$('.popup').each(function(){
		if(last_bottom < parseInt($(this).css('bottom'))){
			$(this).animate({bottom:'-='+last_height});
		}
	});
}

popup.css

.popup{
	display:block;
	position:fixed;
	bottom:0px;
	background-color:#D6D6D6;
	background-color:#F2F2F2;
	right:30px;
	min-width:300px;
	z-index:999999;
	padding:5px;
	border:1px solid #D2D2D2;
	border-bottom:none;
}
.popup h1{
	background-color:#2F2F31;
	background-color:#627AAD;
	margin:0px;
	padding:5px;
	font-size:1.5em;
	color:#99FF00;
	color:#FFF;
	cursor:default;
}
.popup h1 img{
	float:right;
	cursor:pointer;
}
.popup p{
	margin:0px;
	padding:5px;
	padding-bottom:20px;
	font-size:1.3em;
	color:#2F2F31;
	cursor:default;
}

.popup li{
	color:#2F2F31;
}
Related Posts with Thumbnails

Laisser une réponse

Connect with Facebook