8710 sujets

Développement web côté serveur, CMS

Hello !

J essayer de créer une action de pop up sur chaque bouton crée dans mon foreach, ça fonctionne mais que sur le premier bouton

Quelqu'un peut m aider ? ^^

Merci d avance Smiley lol



        foreach ($get_active as $key => $value){
                                    
                    echo'<div class="col three bg nopad pointer">';
                          echo'<div class="imgholder">  '; 
                             echo'<a href="'.$value['kit'].'" target="_blank"><img src="images/'.$value['img'].'" alt=""/></a>';
                          echo '</div>';
                    

    

                          echo' <h1 class="feature">'.$value['cout'].'€</h1>
                        <p>'.$value['nom'].'-'.$value['gestionnaire'].'-'.$value['type_rem'].'</p>
                        <a class="btn" id="pop-up" target="_blank">Voir le kit</a>'
                                  . '<div id="modal-window">
                                        <span class="modal-close">&#10006;</span>
                                        <div class="align-content">
                                           <div class="content">
                                            <iframe src="'.$value['kit'].'"></iframe>
                                           </div>
                                        </div>
                                     </div>';
                        echo' </div>';
                              
                        
                }


<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
   $('#pop-up').click(function() {
      $('#modal-window').addClass('active');
   });
   $('.modal-close').click(function() {
      $(this).parent().removeClass('active');
   });
});
</script>

Modifié par leacode22 (15 Jan 2019 - 12:24)
salut,

en HTML un ID est unique et une part de ton problème est là.

en effet dans ton foreach du démultiplie un ID (id=pop-up):
 <a class="btn" id="pop-up" target="_blank">Voir le kit</a>'


Du coup tous tes liens ont le même ID, donc lorsque ton script JS agit il prend naturellement le premier ID de la liste.

Dans ton cas tu vas être obligé de passer par de l'ajax pour récupérer les valeurs en bdd (où pas un json).

ici un petit exemple: " rel="noopener" >https://stackoverflow.com/questions/37224353/how-to-use-modal-in-foreach] https://stackoverflow.com/questions/37224353/how-to-use-modal-in-foreach
Hello ! Merci beaucoup pour ta réponse !! Smiley lol
Le soucie c est que je suis pas encore super a l aise avec Ajax :S
Il y a pas une solution plus simple ?
C est le dernier module de mon projet et je passe un temps fou dessus .. Smiley decu
J ai essayer de faire ca :


 $i=0;
                foreach ($get_active as $key => $value){
                                    
                    echo'<div class="col three bg nopad pointer">';
                          echo'<div class="imgholder">  '; 
                                          echo'<a href="'.$value['kit'].'" target="_blank"><img src="images/'.$value['img'].'" alt=""/></a>';
                          echo '</div>';
                          echo' <h1 class="feature">'.$value['cout'].'€</h1>
                        <p>'.$value['nom'].'-'.$value['gestionnaire'].'-'.$value['type_rem'].'</p>
                        <a class="btn" id="pop-up" target="_blank">Voir le kit</a>'
                                  . '<div id="modal-window'.$i.'">
                                        <span class="modal-close'.$i.'">&#10006;</span>
                                        <div class="align-content">
                                           <div class="content">
                                            <iframe src="'.$value['kit'].'"></iframe>
                                           </div>
                                        </div>
                                     </div>';
                          
                        echo' </div>';
                       $i ++;       
                        
                }



$(document).ready(function() {
    
  var patt1 = /\bmodal/g;
  
   $('#pop-up').click(function() {
      $(patt1).addClass('active');
   });
   $(patt1).click(function() {
      $(this).parent().removeClass('active');
   });
});
Comme te l'a précisé biduletruck tu ne dois pas utiliser un id car tu ne peux en avoir qu'un seul par page. Donc remplacer l'id pop-up au niveau de la balise par une classe et modifier le sélecteur dans ton js en conséquence.

Note que ton code va certainement ouvrir toutes tes popup. Il faudra certainement utiliser $(this) comme tu l'a fait en dessous pour que cela fonctionne correctement.
Effectivement j ai remplacer l id par une classe et ca ouvre toute les pop en meme temps Smiley biggol
Je remplace
$('.modal-close')
par
 $(this)
?
Encore merci de m aider je suis en dépression avec ce pop up ^^

            $i=0;
                foreach ($get_active as $key => $value){
                                    
                    echo'<div class="col three bg nopad pointer">';
                          echo'<div class="imgholder">  '; 
                             echo'<a href="'.$value['kit'].'" target="_blank"><img src="images/'.$value['img'].'" alt=""/></a>';
                          echo '</div>';
                    
    
    

                          echo' <h1 class="feature">'.$value['cout'].'€</h1>
                        <p>'.$value['nom'].'-'.$value['gestionnaire'].'-'.$value['type_rem'].'</p>
                        <a class="btn pop-up" target="_blank">Voir le kit</a>'
                                  . '<div class="modal-window">
                                        <span class="modal-close">&#10006;</span>
                                        <div class="align-content">
                                           <div class="content">
                                            <iframe src="'.$value['kit'].'"></iframe>
                                           </div>
                                        </div>
                                     </div>';
                        echo' </div>';
$i++;
                              }
                }
?>  

    <div class="group"></div>
  </div>
    <br>

</div>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
   $('.pop-up').click(function() {
      $('.modal-window').addClass('active');
   });
   $('.modal-close').click(function() {
      $(this).parent().removeClass('active');
   });
});
</script>

L'événement sur .modal-close sert à fermer les popups et a priori devrait fonctionner.

Ici tu as écrit un code qui ajoute la classe active a toute les éléments qui ont la classe .modal-window :

$('.modal-window').addClass('active');


Et qui donc ouvre toutes tes popups.

Hors tu veux ajouter cette classe uniquement pour la modal-window a l'intérieur de ta balise .pop-up. Pour cela tu doit utiliser $(this) pour faire référence a ton élément actuel et tu peux utiliser find() pour récupérer ta balise .modal-window à l’intérieur.

https://api.jquery.com/find/
Comme ca ? Smiley smile (desoler j ai du mal ^^ )


<script>
$(document).ready(function() {
   
   $('.pop-up').click(function() {
       $(this).find('.modal-window');
       $(this).parent().addClass('active');
   });
   $('.modal-close').click(function() {
      $(this).parent().removeClass('active');
   });
});
</script>
C'est pas loin. Ton addClass doit être ajouté suite à find('.modal-window') et la deuxième ligne est donc a supprimer.
Huum comme ca ? Smiley smile (Encore merci vous etes tooooooop !!!!! )


              foreach ($get_active as $key => $value){
                                    
                    echo'<div class="col three bg nopad pointer">';
                          echo'<div class="imgholder">  '; 
                             echo'<a href="'.$value['kit'].'" target="_blank"><img src="images/'.$value['img'].'" alt=""/></a>';
                          echo '</div>';
                    
    
    

                          echo' <h1 class="feature">'.$value['cout'].'€</h1>
                        <p>'.$value['nom'].'-'.$value['gestionnaire'].'-'.$value['type_rem'].'</p>
                        <a class="btn pop-up" target="_blank">Voir le kit</a>'
                                  . '<div class="modal-window">
                                        <span class="modal-close">&#10006;</span>
                                        <div class="align-content">
                                           <div class="content">
                                            <iframe src="'.$value['kit'].'"></iframe>
                                           </div>
                                        </div>
                                     </div>';
                        echo' </div>';
$i++;
                              }
                }
?>  

    <div class="group"></div>
  </div>
    <br>

</div>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
   
   $('.pop-up').click(function() {
       $(this).find('.modal-window').addClass('active');
   });
   $('.modal-close').click(function() {
      $(this).parent().removeClass('active');
   });
});
</script>