Créer une fenêtre modale avec jQuery et JSON

Version imprimable

16/08/2015, 10h50
nn888787

Créer une fenêtre modale avec jQuery et JSON

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.
16/08/2015, 18h30
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.
16/08/2015, 21h05
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.

Code:

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

17/08/2015, 10h59
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.
17/08/2015, 11h17
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; }.
17/08/2015, 14h52
nn888787

Oui mais si je souhaite pouvoir afficher la fenêtre modale pas que en haut par exemple si je clique sur un animal du bas , la fenêtre s'affiche mais en haut donc je dois remonter.

Merci de l'aide.
17/08/2015, 15h03
danielhagnoul

Je ne comprends et ne vois pas le problème. La fenêtre modale est fixée (position) au centre de l'écran.

Il me semble avoir fait l'essentiel du travail (code jQuery) de cet exercice, pour le reste il faudra travailler un peu. :aie:
17/08/2015, 17h03
nn888787

Ok merci beaucoup quand même, je vais tester ça :)