Bonjour,

Je voudrais créer une page qui affiche deux multiple modal (multiple reveal modals) et changer leurs contenu en fonction du choix de l'utilisateur.

J'ai créé une page ou l'utilisateur doit sélectionner une image parmi cinq proposé.
J'utilise image picker : http://rvera.github.io/image-picker/ avec le paramètre "limit multiple select" sur 1.

Une fois la sélection faite, l'utilisateur doit valider son choix via un bouton.

Après validation un modal (modal 1) s'ouvre et affiche l'image sélectionné, puis l'utilisateur confirme son choix : deux boutons ok ou sélectionner encore.

Si il clique sur ok, en fonction de son choix et du résultat d'une variable (correct) on affiche un autre modal avec le message gagné ou perdu.
(si le résultat = var il gagne sinon il perd) (modal 2)

Si il clique sur "sélectionner encore" le modal se ferme et l'utilisateur peut sélectionner une autre image, puis il recommence en cliquant sur le bouton de validation.

Si la sélection est vide un modal s'ouvre (modal 1) et invite l'utilisateur a choisir une image.



J'ai utiliser ce plugin pour le modal : http://zurb.com/playground/reveal-modal-plugin

J'ai créer un code JS pour changer le contenu des modals en fonction du choix de l'utilisateur :

Modal 1 : on peut afficher trois types de contenu différents :

  1. Sélectionner une image
  2. C'est votre choix? + image sélectionné
  3. Sélectionner encore.



Modal 2 : on peut afficher deus types de contenu :

  1. Gagné
  2. Perdu




Toutefois je rencontre quelques bug avec l'affichage :

Lorsque l'utilisateur désélectionne une image puis choisi une autre image le modal 1 s'ouvre est affiche Sélectionner une image.
Il clique sur ok le modal se referme et lorsqu'il sélectionne a nouveau une image le modal s'ouvre mais plus rien ne s'affiche, alors qu'il devrait afficher C'est votre choix? + image sélectionné.

J'ai remarqué que j'étais obligé de rafraichir la page pour que la selection marche a nouveau.

Une idée?


Voici mon code html :

Code html : 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
40
41
42
43
44
45
46
47
48
49
<div class="container">
	<header>
		<div>
		    <h1 class="title">Sélectionner la bonne image</h1>
		    <nav>
			<ul>
				<li><a id="check" href="#" data-reveal-id="myModal" data-animation="fade"><span>Validation</span></a></li>
			</ul>
		    </nav>
		</div>
        </header>
 
	<div class="picker">
		<select id="content" class="image-picker" data-limit="1" multiple="multiple">
			<option data-img-src="img_1" value="1"></option>
			<option data-img-src="img_2" value="2"></option>
			<option data-img-src="img_3" value="3"></option>
			<option data-img-src="img_4" value="4"></option>
			<option data-img-src="img_5" value="5"></option>
		</select>
	</div>
</div>
 
<div id="myModal" class="reveal-modal">
	<div id="selection">
		<h1>Sélectionner une image</h1>
		<a href="#" class="close-reveal-modal">ok</a>
	</div>
 
	<div id="validate">
		<h1>C est votre choix?</h1>
		<div id="highlight"><p></p></div>
		<div class="buttons">
			<a id="ok" href="#" data-reveal-id="myModal2" data-animation="fade">ok</a>
			<a id="select-again" class="close-reveal-modal">Sélectionner encore</a>
		</div>
	</div>
</div>
 
<div id="myModal2" class="reveal-modal">
	<div id="won" class="modal-inner-container">
		<h1>Gagné</h1>
		<a href="select-level-1.html" class="close-reveal-modal">OK</a>
	</div>
	<div id="lost" class="modal-inner-container">
		<h1>Perdu</h1>
		<a href="select-level-1.html" class="close-reveal-modal">Recommencer</a>
	</div>
</div>


JS :

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
$(document).ready(function() {
	$('#check').click(function() {
    	var n = $('.image-picker option:selected').length;	
		if ( n == false ) {
			$("#highlight").remove();
			$('#selection').show();
			$('#validate').remove();
		}
		else {
			$('ul li .selected').find('img').clone().appendTo($("#highlight p"));
			$('#selection').remove();
			$('#validate').show();
		}
    });
	$('#select-again').click(function(e) {
		$('#highlight p').empty();
	});
	$('#ok').click(function(){
		var value = $('.image-picker option:selected').val();	
		var correct	= true;
		$('#myModal').hide();
       if (( value == 1 ) && ( correct == true )) {
			$('#lost').remove();
			$('#won').show();
		}
		else {
			$('#won').remove();
			$('#lost').show();	
		}
    });
});