Pop up au chargement d'une page
bonjour a vous tous
voila je viens de créer un pop up CSS dont voici le code html/javascript
Code:
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:
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:
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?
