1. #1
    Membre régulier
    Profil pro
    Inscrit en
    mars 2004
    Messages
    178
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mars 2004
    Messages : 178
    Points : 94
    Points
    94

    Par défaut Javascript dans une pop-up modal

    Bonjour,

    j'ai des soucis de programmation javascript dans une pop-up modal.

    J'ai 2 photos dans la popup modal (1 visible et 1 masquée) et j'essaye de changer le paramètre css->display.

    Lorsque je clique sur une vignette la photo principale ne change pas ?.

    Par conte il semble que quelque chose change dans la fenêtre principale....

    voici le code :

    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
    <div id="myModal<?php echo $i ?>" class="modal fade" tabindex="-1" role="dialog">
    		  <div class="modal-dialog">
    		    <div class="modal-content">
     
    		    	<div class="modal-header">
    			        <h3 class="modal-title c"><?php echo $donnees_messages['marca'] ?></h3>
    			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    			          <span aria-hidden="true">&times;</span>
    			        </button>
    			      </div>
     
    			      <script type="text/javascript">
                                    function changeG(){   
                                            document.getElementById("deuxieme").style.display = "none";             
                                            document.getElementById("grande").style.display = "block";                
                                    }       
                                    function changeD(){      
                                            document.getElementById("grande").style.display = "none";          
                                            document.getElementById("deuxieme").style.display = "block";                
                                    }                       
                                     </script>
     
    		        <div class="modal-body">
    		            <?php echo "<img id='grande' src='images/MECC/".$donnees_messages['fotoG']."' /img>" ?>
    		            <?php echo "<img id='deuxieme' src='images/MECC/".$donnees_messages['fotoD']."' /img>" ?>
     
    		        </div>
     
    		        <div>
    		        	<?php echo "<a href='#' onClick='changeG()'><img src='images/MECC/".$donnees_messages['fotoG']."' width="."'100px' /img></a>" ?>
    		        	<?php echo "<a href='#' onClick='changeD()'><img src='images/MECC/".$donnees_messages['fotoD']."' width="."'100px' /img></a>" ?>
     
    		        </div>
     
    		    </div>
    		  </div>
    		</div>

    merci d'avance pour les réponses !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 703
    Points : 21 041
    Points
    21 041
    Billets dans le blog
    39

    Par défaut



    Du code PHP, pas de code CSS et un code HTML erroné (/img) !

    Exemple :

    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
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
    	<!-- cache-control avec max-age=60 pour le développement uniquement -->
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta name="author" content="Daniel Hagnoul">
      <title>test</title>
      <style>
                    *,
                    *:after,
                    *:before {
                            box-sizing: border-box;
                    }
                    
                    /* code du test */
     
                    #deuxieme {
                            display: none;
                    }
                    
                    /* fin code du test */
                    
            </style>
    	<script>
                    'use strict';
                    
                    document.addEventListener( "DOMContentLoaded", ev => {
                            // le DOM est construit, la page web n'est pas visible
                            // code du test
                            
                            
                            // fin code du test
                    
                    }, false );
                    
                    window.addEventListener( "load", ev => {
                            // le DOM est construit et la page web est visible
                            // code du test
     
                            const
                                    elemImg1 = document.querySelector( "#img1" ),
                                    elemImg2 = document.querySelector( "#img2" ),
                                    elemImgGrande = document.querySelector( "#grande" ),
                                    elemImgDeuxième = document.querySelector( "#deuxieme" ),
                                    imgsVisible = () => {
                                            elemImgDeuxième.style.display = "block";             
                                            elemImgGrande.style.display = "block";                
                                    };
                                    
                                    elemImg1.addEventListener( "click", ev => {
                                            imgsVisible();
                                            
                                            elemImgDeuxième.style.display = "none";             
                                            elemImgGrande.style.display = "block";                
                                    }, false );
                                    
                                    elemImg2.addEventListener( "click", ev => {
                                            imgsVisible();
                                            
                                            elemImgGrande.style.display = "none";          
                                            elemImgDeuxième.style.display = "block";                
                                    }, false );
     
                            
                            // fin code du test
                    
                    }, false );
      </script>
    </head>
    <body>
    	<main>
     
    		<div>
    			<img id='grande' src='http://danielhagnoul.developpez.com/images/imageTest.png'>
    			<img id='deuxieme' src='http://danielhagnoul.developpez.com/images/avatarDVJH.jpg'>
    		</div>
    		<div>
    			<a href='#' id="img1">
    				<img src='http://danielhagnoul.developpez.com/images/imageTest.png' width='100px'>
    			</a>
    			<a href='#' id="img2">
    				<img src='http://danielhagnoul.developpez.com/images/avatarDVJH.jpg' width='100px'>
    			</a>
    		</div>
     
    	</main>
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    mars 2004
    Messages
    178
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mars 2004
    Messages : 178
    Points : 94
    Points
    94

    Par défaut

    J'ai testé mais toujours pas de résultat

    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
    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
     
    <script>
                    'use strict';
     
                    document.addEventListener( "DOMContentLoaded", ev => {
                            // le DOM est construit, la page web n'est pas visible
                            // code du test
     
     
                            // fin code du test
     
                    }, false );
     
                    window.addEventListener( "load", ev => {
                            // le DOM est construit et la page web est visible
                            // code du test
     
                            const
                                    elemImg1 = document.querySelector( "#Vpremiere" ),
                                    elemImg2 = document.querySelector( "#Vdeuxieme" ),
                                    elemImgGrande = document.querySelector( "#premiere" ),
                                    elemImgDeuxième = document.querySelector( "#deuxieme" ),
                                    imgsVisible = () => {
                                            elemImgDeuxième.style.display = "block";             
                                            elemImgGrande.style.display = "block";                
                                    };
     
                                    elemImg1.addEventListener( "click", ev => {
                                            imgsVisible();
     
                                            elemImgDeuxième.style.display = "none";             
                                            elemImgGrande.style.display = "block";                
                                    }, false );
     
                                    elemImg2.addEventListener( "click", ev => {
                                            imgsVisible();
     
                                            elemImgGrande.style.display = "none";          
                                            elemImgDeuxième.style.display = "block";                
                                    }, false );
     
     
                            // fin code du test
     
                    }, false );
      </script>
     
            <div id="myModal<?php echo $i ?>" class="modal fade" tabindex="-1" role="dialog">
    		  <div class="modal-dialog">
    		    <div class="modal-content">
     
    		    	<div class="modal-header">
    			        <h3 class="modal-title c"><?php echo $donnees_messages['marca'] ?></h3>
    			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    			          <span aria-hidden="true">&times;</span>
    			        </button>
    			      </div>			      
     
     
    		        <div class="modal-body">		        	
    		            <?php echo "<img id='premiere' src='images/MECC/".$donnees_messages['fotoG']."'>" ?>
    		            <?php echo "<img id='deuxieme' src='images/MECC/".$donnees_messages['fotoD']."'".">" ?>
     
    		            <?php echo "<br><a href='#' id='img1'><img id='Vpremiere' src='images/MECC/".$donnees_messages['fotoG']."'"." width='80px'></a>" ?>
    		            <?php echo "<a href='#' id='img2'><img id='Vdeuxieme' src='images/MECC/".$donnees_messages['fotoD']."'"." width='80px'></a>" ?>            
    		        </div>
     
     
     
    		    </div>
    		  </div>
    		</div>

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    mars 2004
    Messages
    178
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mars 2004
    Messages : 178
    Points : 94
    Points
    94

    Par défaut

    J'ai enfin réussi ! :-)

    J'ai employé pour cela Jquery et pris en compte le changement des id dans la boucle while !

    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
     
    <div id="myModal<?php echo $i ?>" class="modal fade" tabindex="-1" role="dialog">
    		  <div class="modal-dialog">
    		    <div class="modal-content">
     
    		    	<div class="modal-header">
    			        <h3 class="modal-title c"><?php echo $donnees_messages['marca'] ?></h3>
    			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    			          <span aria-hidden="true">&times;</span>
    			        </button>
    			      </div>			      
     
    		        <div class="modal-body">
    		            <?php echo "<img id='premiere$i' src='images/MECC/".$donnees_messages['fotoG']."'>" ?>
    		            <?php echo "<img id='deuxieme$i' src='images/MECC/".$donnees_messages['fotoD']."'"." style='display:none'>" ?>
     
    		            <?php echo "<br><img id='img1$i' style='cursor:pointer' src='images/MECC/".$donnees_messages['fotoG']."'"." width='80px'>" ?> 
    		            <?php echo "<img id='img2$i' style='cursor:pointer' src='images/MECC/".$donnees_messages['fotoD']."'"." width='80px'>" ?>	            
    		        </div>
     
    		        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
     
    		        <script type="text/javascript">
                            $(document).ready(function(){                                   
                                                    $("#img1<?php echo $i ?>").click(function() {
                                                            $("#deuxieme<?php echo $i ?>").hide();
                                                            $("#premiere<?php echo $i ?>").show();
                                                    });
                                                    
                                                    $("#img2<?php echo $i ?>").click(function() {
                                                            $("#premiere<?php echo $i ?>").hide();
                                                            $("#deuxieme<?php echo $i ?>").show();
                                                    });                                             
                                            });
                      </script>   
    		    </div>
    		  </div>
    		</div>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. php et javascript dans une regex
    Par grochenel dans le forum Regex
    Réponses: 7
    Dernier message: 06/12/2005, 22h21
  2. [xslt]insérer javascript dans une feuille
    Par nemya dans le forum XSL/XSLT/XPATH
    Réponses: 14
    Dernier message: 15/11/2005, 13h27
  3. lien dans une pop up vers la page source
    Par jack1234 dans le forum JavaScript
    Réponses: 5
    Dernier message: 25/09/2005, 12h07
  4. Recuperer variable Javascript dans une variable Java
    Par drizztoli dans le forum JavaScript
    Réponses: 2
    Dernier message: 22/09/2005, 14h58
  5. Récupération de données validées dans une pop-up
    Par hdd dans le forum JavaScript
    Réponses: 2
    Dernier message: 01/12/2004, 16h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo