Discussion :

[nn888787]

Bonjour à tous,

Je suis actuellement en train de faire un exercice où je dois afficher une liste d'animaux avec leur image qui sont dans un fichier JSON sur une page HTML sous forme de liste.

J'ai réussi à le faire , mais maintenant il faut que je crée une fenêtre modale qui me permette au clic sur un li d'afficher le détail de l'animal qui est dans le fichier JSON.

Comment faire ?

J'ai essayé des trucs sur app.js ( evenement on click sur un li ) et index.html (création de la div qui contient la fenetre modale ) , style.css ( style de la fenetre ) le projet est dispo ici si vous voulez m'aider comme y a tous les fichiers http://dl.free.fr/getfile.pl?file=/w4FMGi7U et

l'exo sur http://exosubskill.16mb.com/ .

Merci de l'aide.

[ABCIWEB]

Salut,

Pour une fenêtre modale avec jquery, il y a un tuto ici. Essaies le code dans une page distincte et fais le fonctionner correctement avant de l'adapter à ton code.

[nn888787]

J'ai vu ce tuto mais ça m'explique toujours pas comment récuperer les bonnes informations du JSON pour un animal donné qui est dans la liste.

[danielhagnoul]

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
$(function() {
  var
    people = [],
    jObjModal = $( '#fenetre_modale' );
 
  $.getJSON( './js/exemple.json', function( data ){
    people = data.Animaux;
 
    $.each( people, function( i, f ) {
      $( '<li>' + f.libelle + ' ' + '<img src="img/' + f.image + '"/></li>').appendTo( '.nav-list' );
    });
  });
 
  // code dynamique, on() avec deux sélecteurs. Voir ma FAQ, lien dans la signature
  $( ".nav-list" ).on( "click", "li", function( evt ){
    var lien = $( evt.target ).attr( "src" ).slice( 4 ); // on doit enlever les caratères 0 à 4 : 'img/'
 
    $.each( people, function( i, item ) {
      if ( lien === item.image ) {
        jObjModal
          .html( '<h3>' + item.libelle + '</h3><p>' + item.texte + '</p>' )
          .css({
            "color" : "white",
            "padding" : "0.6em",
            "overflow" : "auto"
          })
          .fadeIn( 800 ); // 0.8s
 
        setTimeout( function( ){
          jObjModal.fadeOut( 800 ); // 0.8s
        }, 10000 ); // 10s
 
        return false; // exit each
      }
    });
 
  });
 
});

[nn888787]

OK ca marche bien pour moi mais comment faire pour qu'elle s'affiche par-dessus la page, une sorte de pop-up ? Ou autre solution car là on ne voie que pour les animaux en haut de la liste et non ceux d'en-bas.

[danielhagnoul]

Sur mon ordinateur, la fenêtre modale fonctionne pour tous les animaux.

Il y a un problème avec le setTimeout lorsqu'on clique rapidement sur plusieurs animaux. Il faut le supprimer ou améliorer son fonctionnement.

J'ai oublié de vous dire que dans le fichier style.css, il faut ajouter la règle CSS : #fenetre_modale h3 { margin-top: 0; }.