Fenêtre modale Bootstrap

marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
- Modifié par jordane45 le 20/04/2015 à 11:52
jordane45
Messages postés
36318
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 septembre 2022
- 20 avril 2015 à 22:18
Bonjour,
Je souhaite faire apparaître une fenêtre modale (dans une boucle for) avec Bootstrap en cliquant sur un bouton.
Le problème est que, avec ce code, la fenêtre ne s'affiche et je ne sais pas pourquoi.

Merci d'avance pour votre aide.

Voici mon code :
<?php 
   for ($i = 0; $i < count($query) ; $i++) 
   { 
?> 
   <h1><?php echo $query[$i]['nom_formation']; ?>  
   <button data-target='myModal' data-toggle='modal' class='btn btn-  primary'>S'inscrire</button> 

   <div class="modal fade" id="myModal"> 
      <div class="modal-dialog"> 
         <div class="modal-content"> 
            <div class="modal-header"> 
               <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
            </div> 
            <div class="modal-body"> Inscription à : 
               <?php echo $query[$i]['nom_formation']; ?> 
               <button class='btn btn-primary'>Confirmer</button> 
               <button type="button" class="close" data-dismiss="modal">Annuler</button> 
            </div> 
         </div> 
      </div> 
   </div> 
   <h3>Contenu de la formation</h3> 
   <p><?php echo $query[$i]['contenu_formation']; ?></p> 

<?php 
   } 
?>


EDIT : AJout des balises de code
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

6 réponses

jordane45
Messages postés
36318
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 septembre 2022
350
Modifié par jordane45 le 20/04/2015 à 12:04
Bonjour,

Il faut sortir la div modal de ta boucle..... car tu ne peux pas avoir plusieurs modal avec le même ID .... sinon... impossible pour ton programme de savoir lequel tu appelles.... et il n'est pas utile de créer X fois la même modal... lorsque seul le contenu change (pas la forme...)
Ensuite... tu peux passer les variable via les attributs DATA- ... ou encore mieux.... récupérer les INFOS via AJAX.

Par exemple (avec des DATA ) :

<?php 
   for ($i = 0; $i < count($query) ; $i++) { 
 $nom_formation = $query[$i]['nom_formation'];
?> 
   <h1><?php echo $nom_formation; ?>  
   <button data-target='myModal' 
               data-toggle='modal' 
               data-formationID='<?php echo $i;?>' 
               data-formation_nom='<?php echo $nom_formation;?>'
               class='btn btn-primary LienModal'>
                  S\'inscrire
  </button> 

    <h3>Contenu de la formation</h3> 
   <p><?php echo $query[$i]['contenu_formation']; ?></p> 

<?php 
   } 
?>

  <div class="modal fade" id="myModal"> 
      <div class="modal-dialog"> 
         <div class="modal-content"> 
            <div class="modal-header"> 
               <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
            </div> 
            <div class="modal-body"> Inscription à : 
               <span id="nom_formation"></span> 
               <button class='btn btn-primary'>Confirmer</button> 
               <button type="button" class="close" data-dismiss="modal">Annuler</button> 
            </div> 
         </div> 
      </div> 
   </div> 

 <script type="text/javascript">
$(".LienModal").click(function(){
 var formationID = $(this).data('formationID');
var nom_formation = $(this).data('nom_formation');
 $("#myModalLabel").html(formationID );
 $("#nom_formation").html(nom_formation);

});
</script>


Cordialement,
Jordane
0
marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015

Modifié par jordane45 le 20/04/2015 à 18:50
Merci pour ta réponse rapide.
Malheureusement j'ai beau recopié ton code parfaitement, le bouton ne fonctionne toujours pas.
J'ai mis en commentaire la boucle pour n'afficher que le bouton et même comme ça mon la fenêtre ne s'affiche pas.
<button data-target='#myModal' data-toggle='modal' class='btn btn-primary'>S'inscrire</button>
 <div class="modal fade" id="myModal">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <h4 class="modal-title" id="myModalLabel">Confirmation d'incription</h4>
    </div>
    <div class="modal-body">
     Voulez-vous vraiment participer à cette formation :
     <button class='btn btn-primary'>Participer</button>
     <button type="button" class="close" data-dismiss="modal">Annuler</button>
    </div>
   </div>
  </div>
 </div>


EDIT : Ajout des balises de code (encore...)

Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
0
jordane45
Messages postés
36318
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 septembre 2022
350 > marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015

20 avril 2015 à 18:52
Première chose à vérifier.... que tu n'aies pas d'erreur javascript dans ta page...
Pour cela je te conseille d'installer le plugin FIREBUG pour Firefox.. de la lander.. d'ouvrir ta page... et de regarder si des messages apparaissent dans la console.
0
marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
> jordane45
Messages postés
36318
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 septembre 2022

20 avril 2015 à 18:54
Il n'y a rien dans la console
0
jordane45
Messages postés
36318
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 septembre 2022
350 > marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015

20 avril 2015 à 18:58
Tu as bien loader Jquery ainsi que les Javascript de BootStrap ?
Tu as également chargé le CSS de Bootstrap ?
As tu essayé de faire simplement un exemple basic tel que celui là :


    <!-- Button HTML (to Trigger Modal) -->

    <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>

     
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>Do you want to save changes you made to document before closing?</p>
                    <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

(que tu peux tester ici : http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=activate-modals-via-data-attribute )
0
jordane45
Messages postés
36318
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 septembre 2022
350
20 avril 2015 à 19:00
Et au fait .... tu utilises quel navigateur pour tester ? (FireFox/Chrome .. ou IE ??)
Si IE.. attention... il faut ajouter des scripts JS pour que ça puisse correctement fonctionner (du moins sur les "anciennes versions" telles que IE8 par exemple )
0