[Résolu] 2 modals qui ne s'apprécient guère !

Bonjour à nouveau.

Je reviens vers vous pour essayer de voir ce qui ne va pas dans mon code.
C'est une page qui doit pourvoir afficher 4 fenêtres modales à la demande avec diaporama sur quelques images chacune et un peu de texte.
Mes diaporamas fonctionnent très bien (enfin comme je veux...) s'ils sont pris séparément...:
* Si leurs fenêtres modal sont prévues logiquement 1 puis 2 dans le déroulement de la page la fenêtre 2 s'affichent sans problème avec son diaporama.
* Mais si je renverse l'ordre dans le fil de la page, donc 2 puis 1, c'est le 1 qui va être parfait (enfin etc.)

Je me dis qu'il y a un truc du premier, donc en amont du second, qui est embêté par le truc du second (le dernier dans le déroulement de la page) : le second s'affiche bien quel qu'il soit.
Et ce truc empêche uniquement l'affichage du diaporama !

Voici le code pour lequel j'ai fait ... plus d'efforts que la dernière fois :
1e partie : l'appel des modals

		<br /><br />
		<span style="text-align:center;"><a href ="/hebergement.php#N1">
		<img class ="450" src = "fichier image N1" ></a></span>
		
		<br /><br />
		<span style="text-align:center;"><a href ="/hebergement.php#Al">
		<img class ="450" src = "fichier image Al" ></a></span>
		

2e partie : le code des modals

<div id="Al" class="oModal"> 			                                        <!-- DÉBUT modal Al  -->
	<div class="omodal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 40px; margin-bottom:50px;" >
	
		<div id = "diapo3" style ="background-color:#A9D0F5;">
			
			<div class= "paquet">   		<!-- c'est une div flex reliant les deux suivantes -->
				<div class = "intro">    	<!-- 1er flex  -->
					blabla
				</div>
		
				<div class = "slide">		<!-- 2e flex  -->
					<ul id="corps3">
	
						<input type="radio" name="radio-btn" id="imag3-1" checked />
    
						<li id="li-container3">
							<div id="contimg3">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>

							<label for="imag3-2" class="nav" title="Next">&#x203a;</label>
						</li>
	
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
etc.	
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

	
						<input type="radio" name="radio-btn" id="imag3-12"  />
    
						<li id="li-container3">
							<div id="contimg3">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>
							<label for="imag3-11" class="nav" title="Previous">&#x2039;</label>

						</li>
					</ul>
				</div> <!-- fin slide  -->
			</div>	<!-- fin paquet  -->
			
			<div class="detail">
				blabla		
			</div>  <!-- fin detail  -->
		</div>	<!-- fin diapo3  -->
		
      <a href="#fermer" class="milieu_droite" title="Fermer">Fermer modal1</a>
		
				
	</div> 			<!-- omadal dialog  -->
</div>			                                                                                    <!-- FIN modal Al  -->





<div id="N1" class="oModal">					                    <!-- DÉBUT modal N1  -->
	<div class="omodal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 40px; margin-bottom:50px;" >
	
		<div id="diapo1" style ="background-color:#F5A9BC;">
			
			<div class= "paquet">
				<div class = "intro">
					blabla
				</div>
	
				<div class = "slide">
					<ul id="corps1">
	
						<input type="radio" name="radio-btn" id="imag1-1" checked />
    
						<li class="li-container1">
							<div id="contimg1">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>
							<label for="imag1-2" class="nav" title="Next">&#x203a;</label>
						</li>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
etc.	
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	
						<input type="radio" name="radio-btn" id="imag1-10"  />
    
						<li class="li-container1">
							<div id="contimg1">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>
							<label for="imag1-9" class="nav" title="Next">&#x203a;</label>
						</li>	
					</ul>
				</div>
			</div>	
			<div class="detail">
				blabla			
			</div> 							<!-- fin détail  -->
		</div>								<!-- fin diapo1  -->
      <a href="#fermer" class="milieu_droite" title="Fermer">Fermer modal2 </a>

	</div> 			<!-- omadal dialog  -->
</div>			                                                                                    <!-- FIN modal N1  -->

Je peux fournir la css mais je me dis que cela doit être le html qui coincent puisque tout ce qui est mise en page permet l'affichage normal (à condition de n'appeler que le second).

Je vous soumets ce défi qui ne tient peut-être (et même sans doute) qu'à peu de chose.
Avec mes remerciement pour l'intérêt que vous aurez à fouiller ce boulot.

Bonsoir,

J'aurais utilisé un nom de groupe different pour les radios de chaque modale, pour un soucis de clarté dans le code en général , se repérer dans le HTML->dans quelle modale suis je ? , ainsi que dans les script et la feuille de style . Toutes semblent avoir des radios en commun avec : name="radio-btn" .

ton code ne permet pas de voir comment tu fait défiler les diaporamas : feuille de styles ou javascript ou les deux ? mais il est probable qu'il y ait un truc qui cloche avec le groupage de tes radios. Tente voir si par exemple : name="radio-btn-ID" (A1/N1) n’éviterais pas des télescopages dans la méthode que tu utilises.

cdt
Modifié par gcyrillus (14 Mar 2022 - 21:19)

gcyrillus a écrit :
Tente voir si par exemple : name="radio-btn-ID" (A1/N1) n’éviterait pas des télescopages dans la méthode que tu utilises.

SUPER ! Merci en grand gcyrillus, je n'aurais pas imaginé le poids du name d'un bouton qu'on ne voit pas ! Ainsi va le code sans doute.

Ca marche pour deux modals, ça marchera pour 4.

C'était donc vraiment pas grand'chose... suffisait de savoir.

(ps : c'est un diaporama sans js, qui n'est pas de moi à la base mais remodelé en totalité... : adapté quoi !)
Modifié par Patrick30 (14 Mar 2022 - 21:36)