Fermeture automatique de POPUP

**forumcmy** · 27/06/2024, 18h20

Bonjour, et merci pour votre aide.
Le problème
Problème javascript sur le site suivant développé en php, html et javascript. : mcc.lceg.net (site en développement.)
Une fois sur le site cliquez : "Ma cave (photos) - en travaux -", un popup s'ouvre avec une liste déroulante. Dans cette liste choisissez "champignons", une série de photos s'affiche.
En cliquant sur une photo, elle ouvre un autre popup avec un agrandissement de cette photo.
Le premier popup (avec la liste déroulante) se referme seul au bout de quelques minutes.
Je voudrais que le second popup se referme après une autre durée.
A noter que toute les photos agrandies s'ouvrent dans le même popup (target identique, une photo chasse l'autre)
Je n'arrive pas à implémenter cette fonctionnalité, soit ça ne marche pas soit ça ferme le premier popup.
Dans la console, j'ai ces messages:

ma_cave_photos.php:74 Uncaught ReferenceError: fenP1 is not defined
at ma_cave_photos.php:74:3
ma_cave_photos.php:86 Uncaught ReferenceError: fenP1 is not defined
at ma_cave_photos.php:86:3
ma_cave_photos.php:98 Uncaught ReferenceError: fenP1 is not defined
at ma_cave_photos.php:98:3

Si je les comprend for bien, je ne vois pas pourquoi !

Le problème se situe dans cette fonction.

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
function affichePhoto($nomP) {
	$cheminPhoto="DOCUMENTS/PHOTOS/";
	$nomPhoto="$nomP.jpg";
	$cheminNomPhoto=$cheminPhoto.$nomPhoto;
	$W=getimagesize($cheminNomPhoto)[0];
	$H=getimagesize($cheminNomPhoto)[1];
	$w=480; $h=$w*$W/$H;
	echo"
		<td class='td1Photos'>
			<div align='center'>
	";
?>
	<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>
<?
	echo"
			</div>
		</td>
	";
?>
	<script>
		/*self.close();* Là ça marche ensuite non, fenP1 n'est pas reconnu */
		fenP1.close();
		/*setTimeout(self.close,5000);*/
	</script>
<?	
}

Ci-dessous tout le code pour l'affichage des photos.

Code html :

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
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
<?
/******************************************************/
/***               photoChap1.html                    */
/******************************************************/
/*** BLOC D'ENTREE DU NOM DES PHOTOS SANS EXTENSION ***/
/*** ATTENTION les photos doivent avoir une extension .jpg
/*** Cette extension sera ajouté après. ***/
/******************************************************/
/*** nombre de lignes actives *************************/
        $nbLiAct=2;
/*** ligne1 * le .jpg sera ajouté après. ***/
        $P_L1=array('P6','P7','P8');  // nom des photos sans extension
        $ST_L1=array('06','07','08'); // texte des photos.
/* ligne2 * le .jpg sera ajouté après. ***/
        $P_L2=array('P9','P9','P9');  // nom des photos sans extension
        $ST_L2=array('09','09','09'); // texte des photos.
/* ligne3 * le .jpg sera ajouté après. ***/
        $P_L3=array('','','');  // nom des photos sans extension
        $ST_L3=array('','',''); // texte des photos.
/* ligne4 * le .jpg sera ajouté après. ***/
        $P_L4=array('','','');  // nom des photos sans extension
        $ST_L4=array('','',''); // texte des photos.
/* ligne5 * le .jpg sera ajouté après. ***/
        $P_L5=array('','','');  // nom des photos sans extension
        $ST_L5=array('','',''); // texte des photos.
/**********************************************************/
/*** FIN BLOC D'ENTREE DU NOM DES PHOTOS SANS EXTENSION ***/
/**********************************************************/
/*** Rien n'est à modifier après ce bloc. *****************/
/**********************************************************/
 
function affichePhoto($nomP) {
        $cheminPhoto="DOCUMENTS/PHOTOS/";
        $nomPhoto="$nomP.jpg";
        $cheminNomPhoto=$cheminPhoto.$nomPhoto;
        $W=getimagesize($cheminNomPhoto)[0];
        $H=getimagesize($cheminNomPhoto)[1];
        $w=480; $h=$w*$W/$H;
        echo"
                <td class='td1Photos'>
                        <div align='center'>
        ";
?>
	<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>
<?
        echo"
                        </div>
                </td>
        ";
?>
	<script>
                /*self.close();* Là ça marche ensuite non, fenP1 n'est pas reconnu */
                fenP1.close();
                /*setTimeout(self.close,5000);*/
        </script>
<?      
        
}
function afficheST($STP) {
?>
  <tr class="trTextesTableV"> 
	 <td class="td1TexteG"><?echo"$STP[0]";?></td>
	 <td class="td2TextesTableV">&nbsp;</td>
	 <td class="td1TexteG"><?echo"$STP[1]";?></td>
	 <td class="td2TextesTableV">&nbsp;</td>
	 <td class="td1TexteG"><?echo"$STP[2]";?></td>
  </tr>
<?
}
function espaceEntrePhotos() {
        echo"<td class='EspaceEntrePhotos'>&nbsp;</td>";
}
function espaceEntreLignes() {
        echo"<td class='espaceV' colspan=''>&nbsp;</td>";
}
?>
 
<table id="table_photos" class="dégradéMCC" title="photos">
<!-- *************** -->
<!-- photosTest.html -->
<!-- *************** -->
<? 
        if ($nbLiAct>=1) {
?>
<!-- Ligne 1 -->
		<tr class="dégradéMCC_tr1">
<?
                        affichePhoto($P_L1[0]); // Photo gauche
                        espaceEntrePhotos();
                        
                        affichePhoto($P_L1[1]); // Photo milieu
                        espaceEntrePhotos();
                        
                        affichePhoto($P_L1[2]); // photo droite
                        
                        afficheST($ST_L1);      // textes sous photos
?>
			<td class="MargeD">&nbsp;</td>
		</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 1
        }
        if ($nbLiAct>=2) {
?>
<!-- Ligne 2 -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L2[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L2[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L2[2]); // photo droite
                
                afficheST($ST_L2);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 2
        }
        if ($nbLiAct>=3) {
?>
<!-- Ligne 3 -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L3[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L3[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L3[2]); // photo droite
                
                afficheST($ST_L3);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 3
        }
        if ($nbLiAct>=4) {
?>
 
<!-- Ligne 4 -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L4[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L4[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L4[2]); // photo droite
                
                afficheST($ST_L4);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 4
        }
        if ($nbLiAct>=5) {
?>
<!-- Ligne 5  -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L5[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L5[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L5[2]); // photo droite
                
                afficheST($ST_L5);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 5
        }
?>
 
</table>
<!-- ******************* -->
<!-- FIN photosTest.html -->
<!-- ******************* -->

Ce code est inclu (include) à partir de la page de la liste déroulante

Code html :

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="body_popup1" onload="window.resizeTo(800,800); setTimeout(window.close, <?echo"1.5*$mn10";?>)";> <!-- ferme au bout de 15 mn. -->
	<div id="HdP"></div>
	<!--- Table principale (id="tableP") -->
		<table id="tableEnTete_photos" class="tableEnTete_popup1 dégradéMCC" title="photos">
			<tr class="">
				<td align="center">
					<div class="texteBase_MCC" style="">
						<form method="post" id="choixR" name="choixR" action="#">
							<label for="numPhotos">Les photos de&nbsp;&nbsp;</label>
							<select name="numPhotos" id="numPhotos" onChange="document.forms['choixR'].submit();">
							  <option value="99">Choisissez vos photos.</option> 
							  <option value="chap1">Champignons</option>
							  <option value="chap2">Labos</option>
							  <option value="chap3">Bizarre</option>
							  <option value="test">Test</option>
							</select>
							<label for="numPhotos">Ma Cave à Champignons</label>
						</form>			
					</div>
				</td>
			</tr>
		<?
                        if ($numPhotos=="chap1") {
                                include('pagesPHOTOS/photosChap1.html');
                        }
                        elseif ($numPhotos=="chap2") {
                                include('pagesPHOTOS/photosChap2.html');
                        }
                        elseif ($numPhotos=="chap3") {
                                include('pagesPHOTOS/photosChap3.html');
                        }
                        elseif ($numPhotos=="test") {
                                include('pagesPHOTOS/photosTest.html');
                        }
                ?>
		</table>
	</div>
</body>

La console me signale aussi, mais c'est sans doute sans rapport :

"One or more documents in this page is in Quirks Mode."

Pourtant toute mes pages me semblent conforme :

Code html :

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

1
2
3
<!DOCTYPE html> <!--html 5-->
<html lang="fr">
<head>

Merci pour vos futures réponses.

**mathieu** · 28/06/2024, 03h42

ce qui se fait habituellement est de charger le contenu dans une balise de la page au lieu d'ouvrir une nouvelle fenêtre.
en javascript vous pourrez ensuite complètement controler cette balise, modifier son code css pour l'afficher n'importe où sur la page (même par dessus le reste du contenu), modifier son contenu pour faire défiler les images de la page, etc.

**NoSmoking** · 28/06/2024, 10h55

Bonjour,
juste au passage :

Envoyé par forumcmy

La console me signale aussi, mais c'est sans doute sans rapport :

"One or more documents in this page is in Quirks Mode."

Pourtant toute mes pages me semblent conforme :

Conformes, pas si sûr, il suffit de faire un Ctrl + U pour voir le code HTML généré et/ou analyser la page au vérificateur

**forumcmy** · 28/06/2024, 17h02

Merci de vos deux réponses,
je les analyse et je vous fait un retour.

**forumcmy** · 29/06/2024, 10h43

Effectivement beaucoup d'erreurs

, toutes assez bénignes mais hors standard et facilement corrigées.
Par contre 4 erreurs me résistent et après pas mal de recherches sur le net, je trouve beaucoup de retour qui laissent penser à un bug du validateur.
Voici les messages :
Nom : erreursV1.jpg
Affichages : 218
Taille : 115,2 Ko

Pour l'erreur 1, je ne comprend vraiment pas.
Pour les autres erreurs, ma table comprend bien 7 colonnes et les colspan sont corrects. Les erreurs 3 et 4 font référence à la même ligne .
voici le code de la table, les erreurs remontées étant entre les lignes 4 et 19 :

Code html :

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
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
<table id="tableEnTete_indexMCC" class="tableEnTete_indexMCC" style="text-align: center;">
	<!-- PHOTO pleurotes -->
	<tr class="dégradéMCC">
		<td colspan='2'>
			<img style="display:block; margin:auto; width:250px" src="DOCUMENTS/IMAGES/Pleurote_Onlygfx-4182_fond_gris-MCC.jpg" alt="">
		</td>
		<td colspan='5' class="texte_titre_tableEnTete_indexMCC">
			<div style="text-align: left;">
				&nbsp;Ma<br>
			</div>
			<div style="text-align: center;">
				Cave à&nbsp;&nbsp;&nbsp;&nbsp;<br>
			</div>
			<div style="text-align: right;">
				Champignons&nbsp;<br>
			</div>
		</td>
	</tr>
 
   <tr class="dégradéMCC"> 
   <!--=====================-->
   <!--== PARTENAIRES ==-->
		<td colspan='2'>
			<div class="texteBase_MCC" style="" title="EN TRAVAUX.">
				<a href="partenaires.php" target="part" class='' onClick="fen_part=window.open(this.href,'part','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30');">Nos partenaires - <br>en travaux -</a>
			</div>
		</td>
 
	<!--==========================-->
   <!--== MA CAVE (photos) ==-->
		<td colspan='2'>
			<div class="texteBase_MCC" style="" title="EN TRAVAUX.">
				<!--a href="ma_cave_photos.php" target="cave" class='' onClick="fen_cave=window.open(this.href,'cave','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30'); fen_cave.document.close(); fen_cave.focus()">Ma cave (photos)</a-->
				<a href="ma_cave_photos.php" target="cave" class='' onClick="fen_cave=window.open(this.href,'cave','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30');">Ma cave (photos) - <br>en travaux -</a>
			</div>
		</td>
 
	<!--==========================-->
   <!--== FORMATIONS ==-->
		<td colspan='2'>
			<div class="texteBase_MCC" style="" title="EN TRAVAUX.">
				<?echo"<a href=\"formations.php\">Formations (cultiver ses champignons) - <br>en travaux -</a>";?>
			</div>
		</td>	 
 
	<!--==========================-->
   <!--== ACTUALISER ==-->
		<td colspan='1'>
			<div style="text-align:center; font-size:14px;">
				<a style="color:#0000CC;"  href="javascript:history.go(0)">Actualiser</a>
			</div>
		</td>
   </tr>
 
   <tr class="dégradéMCC">
	<!--==========================-->
   <!--== point ==-->
 
		<td colspan='7'> 
			<div title="EN TRAVAUX." style="text-align: center;">>
				<?echo"..................";?>
			</div>
		</td>
   </tr>
   <tr class="dégradéMCC">	
	<!--==========================-->
   <!--== RECETTES ==-->
		<td colspan='2'> 
			<div class="texteBase_MCC" style="" title="Les recettes de Ma Cave à Champignons.">
				<!--?echo"<a href=\"recettes.php\">Nos recettes</a>";?-->
				<!--a href="recettes.php" target="recette" class='' onClick="fen_recette=window.open(this.href,'recette','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30'); fen_recette.document.close(); fen_recette.focus()">Mes recettes</a-->
				<!--A priori fen_recette.document.close() n'est plus nécessaire, fen_recette.focus() est suffisant.-->
				<a href="recettes.php" target="recettes" class='' onClick="fen_recette=window.open(this.href,'recettes','width=350 ,height= 500,toolbar=no,scrollbars=yes,status=no,left=30,top=40');">Mes recettes</a>
			</div>
		</td>
 
	<!--=============-->
   <!--== Musique ==-->
		<td colspan='2'> 
			<figure>
			  <figcaption class="texteBase_MCC">Un peu de musique ?</figcaption>
			  <!--audio controls autoplay loop src="/MUSIQUE/HolyVale6.mp3"></audio-->
			  <!--audio autoplay src="DOCUMENTS/MUSIQUE/HolyVale6.mp3"></audio-->
			</figure>
		</td>
 
	<!--===================-->
   <!--== CONTACT texte ==-->
		<td colspan='2'> 
			<div class="texteBase_MCC" style="color: mediumBlue;" title="Envoyez nous un mail.">
				Nous contacter <?echo"$fleche_droite_grasse $mailto_monMailChampis_ici";?> ou là  <?echo"$fleche_droite_grasse" ?>
			</div>
	   </td>
	<!--==========================-->
   <!--== CONTACT.png ==-->
		<td colspan='1'>
			<div title="Envoyez nous un mail.">
<?
                                echo"$mailto_monMailChampis<img style=\"display:block; margin:auto; width:50px;\" src=\"DOCUMENTS/IMAGES/bal_drapeau.gif\" alt=\"\"></a>";
?>
			</div>
	   </td>
	</tr>
 
	<tr class="dégradéMCC">
		<td colspan='7'>
			<?
                        require "index-1.php" // Texte qui sommes-nous.
                        ?> 
		</td>
	</tr>
</table>

**forumcmy** · 29/06/2024, 22h58

A noter que la console ne me remonte plus aucune erreur, seul le validateur m'affiche les 4 erreurs que je ne comprend pas.

**forumcmy** · 30/06/2024, 23h12

Vu le peu de réponse, ma question étant sans doute trop confuse, je vais reformuler.
Je te remercie Mathieu mais je souhaite procéder différement.

J'ai une série de photos dans un tableau.
Quand je clique sur une photo j'ouvre un popup avec la photo redimensionnée. Toutes les photos s'ouvrent dans un même popup (même target.)
Jusqu'içi tout va bien.
Si je clique une autre photo, elle remplace la photo précédente.
Pour fermer le popup on clique sur la croix en haut à droite. Tout marche parfaitement.
Maintenant pour éviter de laisser des popup ouverts j'ai l'habitude de donner un time-out. Et là je n'arrive pas sur ce type de popup à le faire fonctionner.
Le code ci-dessous sans fermeture automatique fonctionne..

Code html :

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

<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="var fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>

Ce code avec fermeture automatique ne fonctionne pas. En fait il ferme la fenêtre appelante qui contient les photos.

Code html :

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

<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="var fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no'); setTimeout(fenP1.close,5000);"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>

Je tourne en rond et j'ai besoin de votre aide.
Merci pour vos réponses.

Fermeture automatique de POPUP

JavaScript

Vue hybride

Discussions similaires

Partager

Partager