Mise en place d’une popup avec jQuery et jQuery cookie

Un petit script simple mais bien pratique si vous devez afficher un message important sur votre site ou encore faire la promotion d’un nouveau service à l’aide d’une popup élégante, centrée et dont l’affichage chez le client sera contrôlé par la création d’un cookie dédié.

Je vais utiliser pour la mise en place d’un cookie un plugin jQuery très simple d’utilisation et pour le reste quelques lignes de javascript et de CSS. Le but : afficher une popup au centre de l’écran et masquer en même temps le reste du contenu du site. Ensuite, ne plus afficher la popup au visiteur si celui ci l’a expressément fermée.

La fonction javascript :

function jPopup(nom,valeur,contenu,duree,largeur,hauteur){
	//pas de cookie : popup
	if(!$.cookie(nom)){
		$('body').append('





');
		$('#inPopUp').css({'width':largeur+'px','height':hauteur+'px','marginTop':'-'+hauteur/2+'px','marginLeft':'-'+largeur/2+'px'});
		$('#inPopUp').load(contenu);
		$('#framePopUp').css({'opacity':0.5});
		$('#framePopUp').fadeIn('fast');
		$('#inPopUp').show();
	};
	//création du cookie à la fermeture de la popup
	$('a.closepopup').live('click',function ()
	{
	$.cookie(nom, valeur, { expires: duree,path: '/' });
	$('#framePopUp').remove();
	$('#inPopUp').remove();
	});
}

$(window).load(function(){
	//Appelle de la fonction au chargement de la page
	jPopup('monsite.fr','popup','popup.html',7,200,200);
});

Un peu de CSS :

#framePopUp {
    background-color:black;
    display: none;
    height: 1000px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
#inPopUp {
    display: none;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 100;
	background-color:white;
}
html > body #inPopUp {
    position: fixed;
}

Démo et sources ici : Popup