Discussion :

[N2.Julien]

Bonjour,

N'ayant que peu de connaissance en JS, je sollicite votre aide. J'ai installé et paramétré jQuery Simplemodal avec succès.

Même si mon intégration fonctionne, je suis presque sur que celle-ci ressemble plus à du bidouillage qu'à un travail propre.

J'apprécierais donc obtenir des conseils pour optimiser ce code.

Je souhaite ouvrir une "popup modal" avec toujours les même propriétés (effet d'ouverture, styles...), mais avec un contenu différent.

Voici donc "l'appel du script" :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
$('.simplemodal-open').click(function(){ //ici on indique comment et qui va ouvrir la fenêtre
$("#simple_modal").modal({ // ici on indique quel bloc sera affiché (la fenêtre en clair)
	opacity:80,
	onShow: function (cufon) {
		Cufon.replace('.cufon', { textShadow: '#000 0 1px 1px' });
	},
	onOpen: function (dialog) {
	dialog.overlay.fadeIn('medium', function () {
		dialog.data.hide();
		dialog.container.fadeIn('medium', function () {
			dialog.data.slideDown('medium');
		});
	});
	},
	onClose: function (dialog) { // ici on dit ce qui se passera à la fermeture
		dialog.data.fadeOut('medium', function () { // ici on enlève les données de la fenêtre en fondu
			dialog.container.hide('medium', function () { // ici on enlève le conteneur (la fenêtre)
				dialog.overlay.fadeOut('medium', function () { // ici on supprime l'overlay avec un déroulement vers le haut
					$.modal.close(); // et la on supprime tout ce qui a été créer par le plugin
				});
			});
		});
	}});
});
 
$('.simplemodal2-open').click(function(){ //ici on indique comment et qui va ouvrir la fenêtre
$("#simple_modal2").modal({ // ici on indique quel bloc sera affiché (la fenêtre en clair)
	opacity:80,
	onShow: function (cufon) {
		Cufon.replace('.cufon', { textShadow: '#000 0 1px 1px' });
	},
	onOpen: function (dialog) {
	dialog.overlay.fadeIn('medium', function () {
		dialog.data.hide();
		dialog.container.fadeIn('medium', function () {
			dialog.data.slideDown('medium');
		});
	});
	},
	onClose: function (dialog) { // ici on dit ce qui se passera à la fermeture
		dialog.data.fadeOut('medium', function () { // ici on enlève les données de la fenêtre en fondu
			dialog.container.hide('medium', function () { // ici on enlève le conteneur (la fenêtre)
				dialog.overlay.fadeOut('medium', function () { // ici on supprime l'overlay avec un déroulement vers le haut
					$.modal.close(); // et la on supprime tout ce qui a été créer par le plugin
				});
			});
		});
	}});
});
 
$('.simplemodal3-open').click(function(){ //ici on indique comment et qui va ouvrir la fenêtre
$("#simple_modal3").modal({ // ici on indique quel bloc sera affiché (la fenêtre en clair)
	opacity:80,
	onShow: function (cufon) {
		Cufon.replace('.cufon', { textShadow: '#000 0 1px 1px' });
	},
	onOpen: function (dialog) {
	dialog.overlay.fadeIn('medium', function () {
		dialog.data.hide();
		dialog.container.fadeIn('medium', function () {
			dialog.data.slideDown('medium');
		});
	});
	},
	onClose: function (dialog) { // ici on dit ce qui se passera à la fermeture
		dialog.data.fadeOut('medium', function () { // ici on enlève les données de la fenêtre en fondu
			dialog.container.hide('medium', function () { // ici on enlève le conteneur (la fenêtre)
				dialog.overlay.fadeOut('medium', function () { // ici on supprime l'overlay avec un déroulement vers le haut
					$.modal.close(); // et la on supprime tout ce qui a été créer par le plugin
				});
			});
		});
	}});
});
</script>

Un des 3 codes html correspondant aux appels (seul la class du tout premier lien change pour "simplemodal2-open more", "simplemodal-open more" ainsi que l'id de la div conteneur "simple_modal3", "simple_modal") :

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
			<a class="simplemodal3-open more" href="{missions}#popup">&raquo; Exemples</a> <a href="{contact}" class="more" target="_self">&raquo; Contactez-nous</a>
 
			<!-- Exemples -->
			<div id="simplemodal-container" class="simplemodal-container" style="position: fixed; z-index: 1002; height: 200px; width: 355px; left: 654px; top: 187px;display:none">
				<a title="Close" class="modalCloseImg simplemodal-close"></a>
				<div style="display:none;" id="simple_modal3" class="simplemodal-data">
					<h2 class="cufon">Proche perdu de vue</h2>
					<h3 class="cufon">L'addiction au pays</h3>
						<p>La Thaïlande change un homme, soyez en certain. 90% de ceux qui ont visiter la Thaïlande reviendront une deuxième fois, voir une troisième fois pour ne plus jamais rentrer dans leur pays d'origine.</p>
						<p>Ne pensez pas qu'en regardant des reportages et documentaires concernant la Thaïlande, vous connaitrez ce pays. Il faut le vivre pour y croire. C'est un magnifique pays et pour un occidental la vie y est facile; rien à voir avec la vie morose de votre pays d'origine.</p>
						<br/>
						<p>Vous avez un fils qui vit en Thaïlande depuis de nombreux mois? Depuis quelques années? Depuis un certain temps, vous n'avez plus aucune nouvelle de lui. Comprenez-le, et sachez qu'il doit y être heureux. 
						<p>Nous serons entièremment à votre disposition afin de vous permettre de reprendre contact avec lui. Considerez-nous comme l'unique moyen de restaurer un lien avec votre proche.</p>
						<br/><br/>
					<h3 class="cufon">Disparitions, enlèvements et reglements de compte</h3>
						<p>Malheuresement dans ce paradis sur Terre, tout n'est pas rose.</p>
						<p>Suite à une &raquo; bagarre &laquo; qui dégénère, ou à des dettes impayées, un proche peut disparaître du jour au lendemain. Ou par malchance, il vous suffit d'être au mauvais endroit, au mauvais moment pour être victime d'une agression qui pourrait vous couter la vie.</p>
						<p>Les tueurs en moto ne sont pas une légende urbaine, et chaque année bon nombre de touristes perdent la vie en Thaïlande.</p>				
						<br/><br/>
						<p class="close_popup">Appuyez sur <b>Echap</b> ou cliquez sur <a class="simplemodal-close" href="#">fermer</a>.</p>
				</div>
			</div>

Comme vous le remarquez, pour l'appel j'ai simplement dupliqué le code afin de pouvoir changer le contenu de cette "popup" modal. Je suppose qu'il est possible de faire plus simple et propre?

Je vous serais très reconnaissant de m'apporter quelques éléments de réponses. Je ne maitrise pas du tout le langage JS mais j'arrive à me débrouiller avec jQuery, quand les scripts sont bien commentés.

Merci par avance,

Cordialement,
Julien.

[N2.Julien]

Bonjour,

Je me permet de relancer le sujet.

Je pense que celui-ci ne doit pas être suffisamment compréhensible. Car techniquement, je suis sur que beaucoup d'entre-vous pourraient m'éclairer là dessus.