ouverture automatique d'un popup jQuery

Version imprimable

05/09/2012, 22h19
skybuck

ouverture automatique d'un popup jQuery

bonjour

je souhaite utiliser ce script ci dessous :
http://sohtanaka.developpez.com/tuto...css-et-jquery/

tel quel
la seule modification est que j'aimerais que cette fenetre popup s'ouvre toute seul et non en cliquant sur un lien

comment dois je faire ?

merci
05/09/2012, 23h17
NoSmoking

Bonsoir,
:faq: Qu'est-ce que la notion de Ready ?
06/09/2012, 06h49
skybuck

merci pour ce debut de reponse
cependant je ne sais absolument pas manipuler le javascript, etant un developpeur episodique amateur

je ne vois donc absulement pas comment integrer cette fonction au script mentionné dans mon premier message

un peu d'aide serait la bienvenue

merci bcp
06/09/2012, 20h09
NoSmoking
il te suffit de mettre le code déclenchant l'ouverture de la popup entre...
Code:

1 2 3 $(document).ready(function() { //Le code ici });

code

voici le code de ma fenetre modale apres avoir placé la fonction ready
mais rien ne se passe

que dois je modifier pour que celle ci s'ouvre toute seule ( et non par un clic sur un lien ) ?

merci

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
 
<?
/////////////////////////// pop up champion
?>
 
<script>
 
$(document).ready(function() {	
 
 
 
 
		//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
		$('a.poplight[href^=#]').click(function() {
			var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
			var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
 
			//Récupérer les variables depuis le lien
			var query= popURL.split('?');
			var dim= query[1].split('&');
			var popWidth = dim[0].split('=')[1]; //La première valeur du lien
 
			//Faire apparaitre la pop-up et ajouter le bouton de fermeture
			$('#' + popID).fadeIn().css({
				'width': Number(popWidth)
			})
			.prepend('');
 
			//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
			var popMargTop = ($('#' + popID).height() + 80) / 2;
			var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
			//On affecte le margin
			$('#' + popID).css({
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
 
			//Effet fade-in du fond opaque
			$('body').append(''); //Ajout du fond opaque noir
			//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
			$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
			return false;
		});
 
		//Fermeture de la pop-up et du fond
		$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
			$('#fade , .popup_block').fadeOut(function() {
				$('#fade, a.close').remove();  //...ils disparaissent ensemble
			});
			return false;
		});
 
 
});
 
 
 
</script>
 
 
 
 
 
 
 
 
<div id="popup_name" class="popup_block">
	<h2>medaille d'argent</h2>
	<p>Solo portugal</p>
	<p><a class="close" href="#" title="Fermeture" >fermeture</a></p>
</div>
 
<?
//////////////////////////////////////////
?>

07/09/2012, 10h19
skybuck
je relance ma demande d'aide etant vraiemnt perdu et n'ayant pas la connaissance je pense pour debugger tout seul

je tourne le code du message precedent dans tout les sens et la fenetre ne s'ouvre pas toute seule malgré tout

je suis obligé de cliquer sur un lien correspondant à :
Code:

1 2 <a href="#?w=500" rel="popup_name" class="poplight">            actualités</a>
comment dois je modifier le code entre les balises script pour que ma fenetre modale s'ouvre ???

merci de votre aide

toujours en train de tenter de resoudre mon probleme pour pouvoir avoir l'ouverture automatique de ma fenetre modale

j'ai donc utilisé tel quel le code de ce post la :
http://sohtanaka.developpez.com/tuto...css-et-jquery/

dans mon script suivant ici :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<?
//------------------------------------- code PHP -------------------------------------------------------------------
include "init.php";
echo $css.$site."css/template.css\">";
 
//------------------------------------- fin code PHP ---------------------------------------------------------------
 
 
////////////// css pop up champion
?>
 
<style>
#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 30%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
 
<?
///////////////////////////////
?>
 
 
 
 
 
 
<HTML>
<HEAD>
<TITLE>La Tulipe Noire , troupe , escrime , artistique , spectacles , cape et d'epee , avignon , cours , medieval , pirates , mousquetaires , C.E.T.E.S </TITLE>
 
 
    <link rel="stylesheet" href="nivo/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/demo/style.css" type="text/css" media="screen" />
    <?//<link rel="stylesheet" href="nivo/demo/style.css" type="text/css" media="screen" />//?>
 
 
 
</HEAD>
 
 
 
<BODY background="images/fond.jpg">
<div align=center>
<table background="images/logo.jpg" style="background-repeat:no-repeat; background-position:0% 20%;" class=site cellpadding=0 cellspacing=0 border=0>
	<tr>
		<td>
			<table cellpadding=0 cellspacing=0 border=0>
				<tr>
					<td class=bordHG>
						<img src="images/fleur.gif" align=top>
					</td>
					<td class=bordH>
						&nbsp;
					</td>
					<td class=bordHD>
						&nbsp;
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table cellpadding=0 cellspacing=0 border=0>
				<tr>
					<td class=bordG>
						&nbsp;
					</td>
					<td width=1198 align=center valign=top>
						<img src="images/titretulipe.jpg" alt="" /> 
						<BR> <BR> <BR>
						<img src="images/soustitre.jpg" alt="" />						
 
 
 
 
						<BR>
 
						<img src="images/devise.jpg" alt="" />
 
 
 
 
 
 
 
 
						<a href="accueil.php">
 
						</a>
					</td>
					<td class=bordD>
						&nbsp;
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr >
		<td >
			<table cellpadding=0 cellspacing=0 border=0>
				<tr >
					<td class=bordBG>
						&nbsp;
					</td>
					<td class=bordB >
						&nbsp; cliquer sur les photos pour entrer dans notre site
 
 
						<a href="#?w=500" rel="popup_name" class="poplight">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actualités</a>
 
 
 
					</td>
					<td class=bordHG >
						<img src="images/fleur2.gif" align=top>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</div>
 
<?
/////////////////////////// pop up champion
?>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
 
$(document).ready(function() {	
 
 
 
 
		//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
		$('a.poplight[href^=#]').click(function() {
			var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
			var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
 
			//Récupérer les variables depuis le lien
			var query= popURL.split('?');
			var dim= query[1].split('&');
			var popWidth = dim[0].split('=')[1]; //La première valeur du lien
 
			//Faire apparaitre la pop-up et ajouter le bouton de fermeture
			$('#' + popID).fadeIn().css({
				'width': Number(popWidth)
			})
			.prepend('');
 
			//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
			var popMargTop = ($('#' + popID).height() + 80) / 2;
			var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
			//On affecte le margin
			$('#' + popID).css({
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
 
			//Effet fade-in du fond opaque
			$('body').append(''); //Ajout du fond opaque noir
			//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
			$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
			return false;
		});
 
		//Fermeture de la pop-up et du fond
		$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
			$('#fade , .popup_block').fadeOut(function() {
				$('#fade, a.close').remove();  //...ils disparaissent ensemble
			});
			return false;
		});
 
 
});
 
 
 
</script>
 
 
 
 
 
 
 
 
<div id="popup_name" class="popup_block">
	<h2>medaille d'argent</h2>
	<p>Solo portugal</p>
	<p><a class="close" href="#" title="Fermeture" >fermeture</a></p>
</div>
 
<?
//////////////////////////////////////////
?>
 
 
</BODY>
</HTML>

et non seulement l'ouverture automatique ne marche pas, mais en fait, la croix de fermeture ne s'affiche pas la fermeture en cliquant n'importe ou sur ma page non plus ...

que se passe til ??
help me ? je patoge car la demo du script elle marche ( sauf l'ouverture auto)

merci de votre aide

07/09/2012, 19h24
NoSmoking
Citation:

que dois je modifier pour que celle ci s'ouvre toute seule ( et non par un clic sur un lien ) ?

-il faut commencer par lire attentivement les commentaires, nombreux et clairs dans le cas présent.
Oui mais je fais comment ????

- il te faut supprimer l'affectation de l'événement sur le click.
Oui mais comment je récupère le nom et la taille qui sont contenu dans le href du lien ????

- bien vu! il te faut initialiser directement les variables avec les bonnes valeurs, par exemple
Code:

1 2 var popID = 'popup1'; var popWidth = 350;
Très bien et pour la croix qui ne s'affiche pas!!!

- dans la version que tu nous mets le bouton de fermeture n'est pas ajouté
Oui mais je le recupéres comment???

- bases toi plutôt sur le code de la démo en ligne!
07/09/2012, 19h37
skybuck

merci
je vais tester tout cela rapidement