Connexion entre une carte interactif et une pop-up
Bonjour, je me permets de vous demander de l'aide car je bloque sur du Javascript, je suis débutant et ce n'est pas vraiment évident :mouarf:
Donc voila j'ai créer une popup avec le tutoriel de (soh tanake) et je souhaite pouvoir lancer cette fenêtre modale à partir d'une carte interactive que j'ai créée.
Voici une partie du code de mes popup.
Code:
1
2
3
4
5
6
7
8
| jQuery(function($){
//Lorsque vous cliquez sur un lien de la classe poplight
$('a.poplight').on('click', function pop_up() {
var popID = $(this).data('rel'); //Trouver la pop-up correspondante
var popWidth = $(window).width() - 100; //Trouver la largeur
var popHeight = $(window).height() - 200; //trouver la hauteur
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({'width': popWidth, 'height': popHeight, 'overflow-y': 'scroll', 'overflow-x': 'hidden'}).prepend('<a href="#" class="close"><img src="#CHEMIN{css/close_pop.png}" class="btn_close" title="Close Window" alt="Close" /></a>'); |
Chaque Popup est lancé a partir d'un menu, j'ai 17 cases de menu allant de "popup_1" à "popup_17"
Code:
<li><a href="#" data-rel="popup_1" class="poplight">
Et voici mon script de ma carte qui permet de lancer une fenêtre d'alerte mais qui faut changer pour lancer la popup correspondant.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $(document).ready(function() {
$('#francemap').vectorMap({
map: 'france_fr',
hoverOpacity: 0.5,
hoverColor: false,
backgroundColor: "#ffffff",
colors: couleurs,
borderColor: "#000000",
selectedColor: "#EC0000",
enableZoom: true,
showTooltip: true,
onRegionClick: function(element, code, region){
var message = 'Département : "'
+ region
+ '" || Code : "'
+ code
+ '"';
alert(message);
}
});
}); |
Ce que j'aimerais c'est changer la fonction que lance onRegionClick pour réussir à lancer le pop-up qui correspond à la zone de ma carte que j'ai cliqué.
Le code de la région correspond au data-rel d'un pop-up.
Voila voila, merci d'avance de votre aide :P
