Pop up dans foreach

Question

leacode22

15 Jan 2019 à 12:23

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)

biduletruck

15 Jan 2019 à 14:03

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

leacode22

15 Jan 2019 à 14:39

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');
   });
});

leacode22

15 Jan 2019 à 14:40

Mais ca ne marche pas non plus Smiley decu

Depassage

15 Jan 2019 à 14:53

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.

leacode22

15 Jan 2019 à 15:03

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>

Depassage

15 Jan 2019 à 15:18

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/

leacode22

15 Jan 2019 à 15:24

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>

Depassage

15 Jan 2019 à 16:09

C'est pas loin. Ton addClass doit être ajouté suite à find('.modal-window') et la deuxième ligne est donc a supprimer.

leacode22

15 Jan 2019 à 17:04

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>

Sujet clos

Développement web côté serveur, CMS

Pop up dans foreach