Pop up au chargement d'une page

**efedril** · 06/01/2014, 18h52

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?

**SpaceFrog** · 07/01/2014, 16h00

Lancer showPopup() dans le document.ready
http://javascript.developpez.com/faq...oduction#Ready

**efedril** · 09/01/2014, 17h38

merci a toi mais j'ai un autre problème

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
 
<body class="royal_loader">
     <SCRIPT LANGUAGE="JavaScript">
		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() });
 $(document).ready(function(){
    showPopup();
});
	</SCRIPT>
 
...
 
</body>

comme tu peu le voir je lance bien mon pop up au chargement mais celui-ci ne s'affiche pas ou me suis je trompé?

**SpaceFrog** · 10/01/2014, 09h31

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$("#customPopup").css("margin-top", "-"   (popupH / 2   40)   "px");
			$("#customPopup").css("margin-left", "-"   popupW / 2   "px");

c'est comme cela que tu concatènes des chaines ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#customPopup").css("margin-top", "-"+  (popupH / 2) +   "px");

Pop up au chargement d'une page

jQuery

Vue hybride

Discussions similaires

Partager

Partager