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>et la partie CSS
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() }); }
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?
Partager