Calque / popup d'information sur page d'accueil

WRInaute discret
Bonjour à tous,

La boîte dans laquelle je travaille ferme 2 semaines pendant les vacances.
Etant très présents sur la toile, j'aimerais indiquer aux internautes arrivant sur le site, à l'aide d'un genre de popup, que la société ferme 2 semaines en Août.

Je cherche un effet très en vogue, probablement AJAX ou JS, qui fait apparaître un genre de popup en plein milieu de l'écran, par dessus le contenu du site, avec ce contenu un peu grisé / flou.
J'ai pu voir ce style d'effet sur myspace ou encore appartager.com (une fois loggé).

Il suffit de fermer cette petite fenêtre pour revenir au site en mode normal.

J'imagine que cet outil doit être utilisé ponctuellement pour des offres promotionnelles, offres spéciales, informations spéciales...

Auriez-vous quelque chose à me recommander ?

Merci d'avance.
PS : j'ai un site en php / mysql.
 
WRInaute discret
Un script que j'ai fait il y a qqes mois

dans le HEAD
Code:
<script type="text/javascript" language="JavaScript">
function afficherMasquer(){ 
   var args=afficherMasquer.arguments;
   var action, objet, css;
 
   // on parcours tous les arguments de la fonction
   for(var i=0; i<(args.length-1); i+=2)
   {
      if((objet=document.getElementById(args[i]))!=null)
      {
         action=args[i+1];
         switch(action)
         {
            /* la valeur de "css" est à remplacer avec les noms des classes
            utilisées dans la feuille de style */
            case 'afficher':
            case '1':
               css='apparent';
               break;

            case 'masquer':
            case '0':
            default:
               css='cache';
         }
         objet.className=css;
      }
   }
}
</script>
<style type="text/css">
.apparent{

   visibility: visible;
   display: block;
	position:absolute;     
	left: 50%; 
     top: 50%;
     margin-top: -200px; /* moitié de la hauteur */
     margin-left: -300px; /* moitié de la largeur */
	z-index: 500;
}
.cache{
   /* uniques attributs de cette classe */
   visibility: hidden;
   display: none;
  }

</style>

DANS LE BODY
Code:
<div class="apparent" id="infos">
	<div align=right> <a href="#" onclick="javascript:afficherMasquer('infos','masquer')" class="lien">Fermer la fenetre</a></div>
	blablabla
</div>
 
Discussions similaires
Haut