Tutoriel N° 7a
Voila le résultat souhaité:
Commençons par ajouter la librairie jquery dansle head de votre page:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Je crée 3 fonctions js dans le head:
<SCRIPT language=JavaScript>
// detection largeur ecran
function width_window()
{
if (window.innerWidth) return window.innerWidth;
else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
else return 0;
}
// detection hauteur ecran
function height_window()
{
if (window.innerHeight) return window.innerHeight;
else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
else return 0;
}
// affichage calque appeler over qui s'affiche en fadein
function fadeover(){
document.getElementById('over').style.height=height_window()+'px';
document.getElementById('over').style.width=width_window()+'px';
document.getElementById('over').style.marginTop=-height_window()/2+'px';
document.getElementById('over').style.marginLeft=-width_window()/2+'px';
$(function(){
$('#over').hide(); // permet de cacher le bloc
$("#over").fadeIn("slow");
});
}
</script>
dans votre body on ajoute ces 2 divs qui seront cachés par defaut:
<!-- div over -->
<div id="over" style="display:none;position:absolute;left: 50%;top: 50%;
background: #000000;opacity : 0.8;filter : alpha(opacity=80);z-index:10;">
</div>
<!-- div popup -->
<div id="overbody" style="display:none;position:absolute;
left: 50%;
top: 50%;
width: 480px;
height: 400px;
margin-top: -200px; /* moitié de la hauteur */
margin-left: -290px; /* moitié de la largeur */
z-index:15;"><div id="box" style="display:none;position: relative; width:480px; height:400px; top:0; bottom:0; left:0; right: 0; margin: auto; padding:0px;z-index:100;">
<div align="right" style="padding:10px;"><a href="#" onclick="document.getElementById('box').style.display='none';document.getElementById('overbody').style.display='none';document.getElementById('over').style.display='none';"><font color="#30A0D1">Fermer</font></a></font></div>
<div id="contenu">
<div style="font-size:15px;padding:10px;">
<!-- votre contenu -->
</div>
</div>
</div></div>
Pour afficher la popup et l'effet fadin:
<a href="<a href="#" onclick="fadeover();document.getElementById('box').style.display='block';document.getElementById('overbody').style.display='block';"><">afficher</a>
