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

JavaScript Discussion :

createPopup et lien dans un DIV


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2003
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2003
    Messages : 194
    Par défaut createPopup et lien dans un DIV
    Bonjour,
    J'ai, dans un tableau, une cellule qui possède un lien qui va ouvrir une fenêtre popup qui affichera le contenu d'un DIV de ma page.
    Pour cela je me suis inspiré de ce tuto : http://robloche.free.fr/javascript/p...ial_popup.html (IE uniquement)

    Oui je me sert d'un objet propre à IE mais comme je développe sur une plateforme en intranet c'est suffisant.

    Mon popup s'affiche correctement, là où ça pose problème c'est que dans mon DIV je met des lien "a href", qui sont bien reconnu en tant que lien mais ne peuvent pas être cliqué ou plutôt n'effectuent aucune action quand on clique dessus.

    Pour faire simple voici le code javascript :
    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
     
    function showDivPopup(idToShow, titrePopup) {
        // test si autre navigateur que Internet explorer
        if(!window.createPopup) {
            alert("Ce navigateur ne connaît pas les objets Popup.\nVeuillez utiliser Internet Explorer");
            return false;
        }
        // Création du popup
        var oPopup   = window.createPopup();
        var oPopBody = oPopup.document.body;
     
        // On va chercher le DIV dont on veut le contenu
        var divToShow = document.getElementById(idToShow);
     
        // ajout des div et mise en forme
        oPopBody.innerHTML             = "<div id='divPopup'>"; // div général
     
        // pas de titre s'il n'est pas passé en paramètres.
        if(titrePopup) {
            var styleTitre = //"background-color:#99CCCC;"+
            "font-weight:bold;"+
            "color:black;"+
            "border-bottom: 1px solid black;"+
            "fontFamily:Verdana, Geneva, Helvetica, Arial, sans-serif;";
            oPopBody.innerHTML        += "<div id='titrePopup' style='"+styleTitre+"'>"+titrePopup+"</div>"; // titre du popup
        }
        oPopBody.innerHTML            += divToShow.innerHTML; // div déjà présent sur la page
        oPopBody.style.backgroundColor = "#99CCCC";
        oPopBody.style.border          = "solid black 2px";
        oPopBody.style.margin          = "5px";
        oPopBody.style.color           = "black";
        oPopBody.style.textAlign       = "justify";
        oPopBody.style.fontFamily      = "Verdana, Geneva, Helvetica, Arial, sans-serif";
        oPopBody.style.fontSize        = "12px";
        oPopBody.innerHTML            += "</div>";
     
        // Largeur et hauteur du popup : divToShow.offsetWidth et .offsetHeight
        // donnent la largeur et la hauteur du DIV dont l'id est idToShow
        // (faire quelques essais pour trouver les bonnes valeurs)
        var pWidth  = divToShow.offsetWidth + 80;
        var pHeight = divToShow.offsetHeight + 28;
     
        // Position d'affichage du popup
        // Plein de solutions possibles : on peut par exemple le placer
        // par rapport à l'objet qui a déclenché l'évènement.
        // Là, il est placé par rapport à cet objet et au pointeur de la souris.
        var posX = event.offsetX;
        var posY = event.offsetY;
     
        // affichage du popup
        oPopup.show(posX, posY, pWidth, pHeight, event.srcElement);
    }
    le DIV inclus dans ma page :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div id="toto" style="position:absolute;visibility:hidden;">
        <a href="http://www.google.fr">lien 1</a><br><br>
        <a href="#">lien 2</a><br>
        <a href="#">lien 3</a><br>
    </div>
    le lien de la cellule de mon tableau :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href='#' onclick="showDivPopup('toto', 'Liens')>Afficher</a>
    J'imagine que le problème vient de mon createPopup mais comme il m'affiche bien la fenêtre j'aurais bien aimé le garder.

    Mais si vous avez une solution pour faire fonctionner les liens voire une solution autre que createPopup qui m'affiche la même chose et qui fonctionne mieux je suis preneur.

  2. #2
    Membre Expert
    Inscrit en
    Septembre 2002
    Messages
    2 307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Par défaut
    <a href='javas cript:showDivPopup('toto', 'Liens')>Afficher</a>

  3. #3
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2003
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2003
    Messages : 194
    Par défaut
    je te dirai non sans même tester car ce n'est pas ce lien qui ne fonctionne pas mais le lien que j'ai mis dans mon DIV :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div id="toto" style="position:absolute;visibility:hidden;">
        <a href="http://www.google.fr">lien 1</a><br><br>
        <a href="#">lien 2</a><br>
        <a href="#">lien 3</a><br>
    </div>
    EDIT : le lien "Afficher" permet de m'afficher mon Popup ce qu'il fait sans problème.

  4. #4
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2003
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2003
    Messages : 194
    Par défaut
    J'ai fini par trouver une solution :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div id="toto" style="position:absolute;visibility:hidden;">
    <a href="#" onclick="parent.location.href='http://www.google.fr'">lien 1</a>
    </div>
    Mais maintenant j'aimerais bien lancer le lien dans une nouvelle fenêtre...

Discussions similaires

  1. ouvrir un lien dans un div
    Par ylanu dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 24/04/2008, 11h56
  2. style des liens dans un div et mise en page 2 colonnes sans tableau
    Par ipeteivince dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 08/11/2007, 22h07
  3. mettre un lien dans un div en javascript
    Par calitom dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 16/10/2007, 19h38
  4. Comment afficher un lien dans un <div>
    Par essono dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 02/12/2006, 15h05
  5. [CSS] lien dans un div avec superposition d'image
    Par avogadro dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 26/07/2006, 10h10

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