IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Raphael-min + Fenêtre pop-up


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Avril 2012
    Messages : 25
    Par défaut Raphael-min + Fenêtre pop-up
    Bonjour,

    J'ai des bases en HTML, CSS et PHP mais aujourd'hui j'ai besoin d'utiliser du javascript.

    Sur mon site j'ai rajouté une carte de la France cliquable par région, j'ai utilisé la bibliothèque Raphael-min.

    La carte fonction parfaitement, maintenant j'aimerai que quand on clique sur un région le lien s'ouvre dans une fenêtre pop-up comme dans ce tuto:

    http://sohtanaka.developpez.com/tuto...css-et-jquery/

    J'utiliserai cette fenêtre pop-up pour mettre une photo, adresse mail, texte de présentation du contact dans la région.

    Au début du tuto je dois mettre ce code sur le lien:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="#?w=500" rel="popup_name" class="poplight">En savoir plus</a>
    Voici mon code java pour une région:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    region.alsace = paper.path("M 480.71875,112.28125 L 477,113.3125 L 475.28125,116.3125 L 475.28125,119.25 L 473.71875,120.625 L 472.34375,120.625 L 469.8125,118.84375 L 467.84375,120.21875 L 465.5,120.21875 L 463.5625,118.28125 L 459.84375,117.6875 L 457.6875,116.71875 L 456.90625,113.78125 L 455.15625,115.71875 L 454.1875,120.21875 L 451.625,121 L 451.625,123.53125 L 454.1875,124.71875 L 456.125,126.09375 L 455.34375,127.84375 L 457.125,129 L 460.25,126.65625 L 465.6875,129.78125 L 463.375,134.09375 L 463.5625,135.46875 L 465.125,137.03125 L 463.9375,141.125 L 460.03125,145.03125 L 457.875,144.84375 L 459.25,146.1875 L 458.46875,149.71875 L 459.25,155 L 462.96875,155.96875 L 460.8125,160.84375 L 458.46875,165.53125 L 459.0625,168.46875 L 457.125,172.96875 L 453.78125,175.875 L 453.59375,183.5 L 451.15625,185.59375 L 451.25,185.65625 L 452.03125,187.21875 L 455.15625,187.40625 L 458.6875,190.15625 L 459.25,191.5 L 459.0625,193.84375 L 458.09375,195.625 L 458.46875,197.96875 L 461.21875,197.5625 L 461.8125,199.71875 L 462.78125,203.875 L 465.09375,203.5 L 464.6875,205.625 L 466.0625,206.8125 L 473.28125,206.625 L 477,203.6875 L 477.1875,199.375 L 479.15625,196.84375 L 476.59375,193.90625 L 475.25,190.78125 L 476.8125,188.65625 L 476.8125,183.75 L 477.78125,181.40625 L 477.78125,177.5 L 479.53125,174.96875 L 477.59375,172.25 L 477.375,166 L 482.46875,156.03125 L 481.875,150.375 L 484.21875,142.75 L 484.8125,136.09375 L 489.875,132.40625 L 489.875,130.0625 L 491.84375,127.5 L 493.40625,127.5 L 495.15625,125.75 L 494.78125,122.4375 L 496.53125,117.75 L 499.25,117.15625 L 496.53125,115 L 491.65625,114.4375 L 487.34375,112.28125 L 484.40625,114.03125 L 482.84375,112.28125 L 480.71875,112.28125 z").attr(attr);
    region.alsace.attr({title: 'Alsace',href:"#"});
    J'essaye de le modifier comme ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    region.alsace = paper.path("M 480.71875,112.28125 L 477,113.3125 L 475.28125,116.3125 L 475.28125,119.25 L 473.71875,120.625 L 472.34375,120.625 L 469.8125,118.84375 L 467.84375,120.21875 L 465.5,120.21875 L 463.5625,118.28125 L 459.84375,117.6875 L 457.6875,116.71875 L 456.90625,113.78125 L 455.15625,115.71875 L 454.1875,120.21875 L 451.625,121 L 451.625,123.53125 L 454.1875,124.71875 L 456.125,126.09375 L 455.34375,127.84375 L 457.125,129 L 460.25,126.65625 L 465.6875,129.78125 L 463.375,134.09375 L 463.5625,135.46875 L 465.125,137.03125 L 463.9375,141.125 L 460.03125,145.03125 L 457.875,144.84375 L 459.25,146.1875 L 458.46875,149.71875 L 459.25,155 L 462.96875,155.96875 L 460.8125,160.84375 L 458.46875,165.53125 L 459.0625,168.46875 L 457.125,172.96875 L 453.78125,175.875 L 453.59375,183.5 L 451.15625,185.59375 L 451.25,185.65625 L 452.03125,187.21875 L 455.15625,187.40625 L 458.6875,190.15625 L 459.25,191.5 L 459.0625,193.84375 L 458.09375,195.625 L 458.46875,197.96875 L 461.21875,197.5625 L 461.8125,199.71875 L 462.78125,203.875 L 465.09375,203.5 L 464.6875,205.625 L 466.0625,206.8125 L 473.28125,206.625 L 477,203.6875 L 477.1875,199.375 L 479.15625,196.84375 L 476.59375,193.90625 L 475.25,190.78125 L 476.8125,188.65625 L 476.8125,183.75 L 477.78125,181.40625 L 477.78125,177.5 L 479.53125,174.96875 L 477.59375,172.25 L 477.375,166 L 482.46875,156.03125 L 481.875,150.375 L 484.21875,142.75 L 484.8125,136.09375 L 489.875,132.40625 L 489.875,130.0625 L 491.84375,127.5 L 493.40625,127.5 L 495.15625,125.75 L 494.78125,122.4375 L 496.53125,117.75 L 499.25,117.15625 L 496.53125,115 L 491.65625,114.4375 L 487.34375,112.28125 L 484.40625,114.03125 L 482.84375,112.28125 L 480.71875,112.28125 z").attr(attr);
    region.alsace.attr({title: 'Alsace',href="#?w=500" rel="popup_name" class="poplight"});
    Mais avec ce code, la carte ne ce charge plus.

    Quelqu'un peut-il m'expliquer???

    Merci d'avance pour votre aide je comprend vraiment pas :-(

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    les différents éléments doivent être séparés par des virgules
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    region.alsace.attr({title: 'Alsace', href="#?w=500", rel="popup_name", class="poplight"});

  3. #3
    Membre averti
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Avril 2012
    Messages : 25
    Par défaut
    Merci ça fonctionne

    Comment je peux modifier et intégrer ce script pour que ce soit ma zone qui soit cliquable?


    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
     
    jQuery(function($){
     
        //Lorsque vous cliquez sur un lien de la classe poplight
        $('a.poplight').on('click', function() {
            var popID = $(this).data('rel'); //Trouver la pop-up correspondante
            var popWidth = $(this).data('width'); //Trouver la largeur
     
            //Faire apparaitre la pop-up et ajouter le bouton de fermeture
            $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
     
            //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
            var popMargTop = ($('#' + popID).height() + 80) / 2;
            var popMargLeft = ($('#' + popID).width() + 80) / 2;
     
            //Apply Margin to Popup
            $('#' + popID).css({
                'margin-top' : -popMargTop,
                'margin-left' : -popMargLeft
            });
     
            //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
            $('body').append('<div id="fade"></div>');
            $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
     
            return false;
        });
     
     
        //Close Popups and Fade Layer
        $('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
            $('#fade , .popup_block').fadeOut(function() {
                $('#fade, a.close').remove(); 
        }); //...ils disparaissent ensemble
     
            return false;
        });
     
     
    });
    Merci pour ton aide

Discussions similaires

  1. Réactualisation de page + fenêtre pop up
    Par gromit83 dans le forum Langage
    Réponses: 1
    Dernier message: 01/05/2006, 14h04
  2. Blocage fenêtre pop-up ??!!
    Par maliba dans le forum Autres Logiciels
    Réponses: 7
    Dernier message: 31/03/2006, 11h56
  3. [Swing] Fenêtre pop-up
    Par Invité dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 28/02/2006, 21h42
  4. Fenêtre pop-up
    Par MYster dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 14/11/2005, 21h43
  5. Ouvrir une fenêtre pop up en plus d'une page normale
    Par Satination dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 17/08/2005, 10h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo