bonjour a vous tous

voila je viens de créer un pop up CSS dont voici le code html/javascript

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<div id="customPopup">
	<a href="javascript:showPopup();" title="Montrer le popup">Popup !</a>
</div>
	<a href="javascript:showPopup();" title="Montrer le popup">Popup !</a>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function showPopup() {
     // ici on insère dans notre page html notre div gris
	$("#customPopup").before('<div id="grayBack"></div>');
     // maintenant, on récupère la largeur et la hauteur de notre popup
	var popupH = $("#customPopup").height();
	var popupW = $("#customPopup").width();
     // ensuite, on crée des marges négatives pour notre popup, chacune faisant
     // la moitié de la largeur/hauteur du popup
	$("#customPopup").css("margin-top", "-"   (popupH / 2   40)   "px");
	$("#customPopup").css("margin-left", "-"   popupW / 2   "px");
     // enfin, on fait apparaître en 300 ms notre div gris de fond, et une fois
     // son apparition terminée, on fait apparaître en fondu notre popup
	$("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function () { $("#customPopup").fadeIn(500); });
}
function hidePopup() {
     // on fait disparaître le gris de fond rapidement
	$("#grayBack").fadeOut('fast', function () { $(this).remove() });
     // on fait disparaître le popup à la même vitesse
	$("#customPopup").fadeOut('fast', function () { $(this).hide() });
}
et la partie CSS

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#grayBack 
{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: black;
     z-index: 1999;
     opacity: 0.5;
}
#customPopup 
{
     position: fixed;
     display: none;
     left: 50%;
     top: 50%;
     z-index: 2000;
     padding: 20px;
     width: 560px;
     background: url(../images/HPNY_IM2_2014_V2.jpg)no-repeat center center;
     font-size: 12px;
     line-height: 16px;
     color: #202020;
     border : 3px outset #555555;
}


mais voila je n'arrive pas a l'afficher au lancement de la page que dois-je modifier pour que cela marche?