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 :

afficher une popup juste au-dessus de l'endroit cliqué


Sujet :

JavaScript

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Points : 95
    Points
    95
    Par défaut afficher une popup juste au-dessus de l'endroit cliqué
    Bonjour à tous,
    j'ai un tableau chargé de nombreuses données provenant d'une bdd et à chaque ligne du tableau , j'ai deux colonnes sur lesquelles un clic fait apparaître une popup donnant pas mal de renseignements.
    Cette popup s'affiche toujours selon la valeur : exemple top:500px; soit plus ou moins au milieu de l'écran. Tout est correct, mais j'aimerais une position plus précise.
    Est-il possible d'imposer à top une variable qui correspondrait à la position (y) soit ($y) du clic pour que la popup s'affiche juste à cet endroit de la ligne du tableau?
    Si oui, pouvez-vous m'aider?
    remerciements
    Claudine

  2. #2
    Membre éclairé
    Avatar de LearningBoy
    Homme Profil pro
    Ingénieur Logiciel - Fullstack JavaScript
    Inscrit en
    Août 2017
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur Logiciel - Fullstack JavaScript
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2017
    Messages : 73
    Points : 664
    Points
    664
    Par défaut Pop-up et tableau
    Bonjour Claudine,

    Vous souhaiteriez afficher une popup non pas à un endroit fixe au milieu de l'écran, mais plutôt au dessus de la ligne du tableau en question.

    Personnellement pour ajouter des popups dans mon application, j'utilise la librairie Bootstrap, qui permet de choisir précisément où afficher la popup par rapport à un élément donnée : au haut, à droite, à gauche, etc.

    Est-ce que vous utilisez une librairie pour vos popups ?


    Cordialement,

    Simon, auteur sur Awesome Angular.
    Découvrez "Angular, ECMAScript 6 et TypeScript" pour vos futurs développements web...

  3. #3
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Des infobulles aux passages de la souris, avec l'attribut title, résoudraient-ils votre problème?

    Exemple d'infobulle :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <p title="Deux couleurs">Le ciel est bleu et l'herbe verte.</p>
      </body>
    </html>

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Points : 95
    Points
    95
    Par défaut afficher une popup juste au-dessus de l'endroit cliqué
    Bonjour LearningBoy ,
    non, je n'utilise pas de librairie.
    Si, ce système permet de résoudre mon problème. C'est OK mais malheureusement, je ne suis pas assez experte pour appliquer le Bootstrap d'autant plus que tout est en anglais et je n'y comprend plus grand chose.
    Je reprend ma question que je n'ai pu résoudre seule:"Est-il possible d'imposer à top une variable qui correspondrait à la position (y) soit ($y) du clic pour que la popup s'affiche juste à cet endroit de la ligne du tableau?" car si j'assigne à :, il semble qu'il ne prend pas cette variable puisqu'il affiche toujours la popup en haut de l'écran(valeur0).
    remerciements pour votre aide.
    Claudine

  5. #5
    Membre éclairé
    Avatar de LearningBoy
    Homme Profil pro
    Ingénieur Logiciel - Fullstack JavaScript
    Inscrit en
    Août 2017
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur Logiciel - Fullstack JavaScript
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2017
    Messages : 73
    Points : 664
    Points
    664
    Par défaut Règle CSS position
    Bonjour,

    Pour placer votre popup par rapport à un élément de votre page, il me semble que vous devez appliquez sur l'élément parent de la popup la règle CSS suivante :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .bloc-parent {
      position : relative;
    }
    .popup {
      position : absolute;
      top : 5px;
      left : 5px;
    }

    Dans l'exemple de code ci-dessus, la popup est positionné relativement à son bloc parent. Avez-vous déjà essayé cette règle CSS ?

    Cordialement,

    Simon, auteur sur Awesome Angular.
    Découvrez "Angular, ECMAScript 6 et TypeScript" pour vos futurs développements web...

  6. #6
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour Claudine,

    Les infobulles ne vous donnent pas satisfaction?

    Je proposerais bien volontiers un exemple de code, mais votre question n'est pas très claire : Vous voulez une petite fenêtre quand on clique sur une case, sur une ligne ou sur une colonne du tableau?

  7. #7
    Membre régulier
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Points : 95
    Points
    95
    Par défaut afficher une popup juste en-dessous du clique
    un tout grand merci, C'est OK, c'était trop simple mais il fallait le savoir.

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Points : 95
    Points
    95
    Par défaut
    merci à eleydet pour ses propositions d'aide, mais j'ai enfin une solution plus que satisfaisante fournie par LearningBoy
    Claudine

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher une div juste à côté d'un lien en cliquant dessus
    Par smfrd8 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 12/04/2014, 01h03
  2. Afficher une popup "intrusive"
    Par Stef_etc dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 15/09/2008, 10h19
  3. [Struts:Layout] comment afficher une popup ?
    Par med_alpa dans le forum Struts 1
    Réponses: 1
    Dernier message: 11/04/2008, 12h10
  4. Afficher une Popup "Patientez"
    Par tomy29 dans le forum Delphi
    Réponses: 7
    Dernier message: 22/02/2007, 17h19
  5. Comment afficher une popup contenant un progress bar ?
    Par jlassira dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 16/03/2006, 18h49

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