JQuery: Afficher un div caché à la position de la souris lorsque le lien est cliqué

Supposons que j'ai 2 liens dans ma page et je veux un div caché à apparaître à la position du curseur (souris x,y) sur la page lorsque l'un des liens est cliqué. Aussi, j'aimerais passer une valeur pour définir le titre de la div (voir divTitle id).

Comment puis-je le faire à l'aide de jQuery?

Caché Div:

<div class="boxFAQ" id="questionMarkId">
  <span id="divTitle"></span>  
  SHOW ME!
</div>
Et qu'avez-vous essayé?
Quelle partie vous avez des problèmes avec?
Vous avez des problèmes vous pouvez en dire un peu plus

OriginalL'auteur E Paiz | 2013-02-12

  1. 11

    Le code ci-dessous va vous donner l'idée de montrer la div. Procéder à vos besoins et ensuite de le cacher en conséquence ou l'affichage de messages que vous avez besoin 

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){
   $('.alink').click(function(e){
    $('#questionMarkId').hide();
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
    $('#questionMarkId').show();
   });
});



</script>
</head>

<body>

<div class="boxFAQ" id="questionMarkId" style="display: none;">
  <span id="divTitle"></span>  
  SHOW ME!
</div>


<br /><br /><br /><br />
<a href="#" class="alink">Link 1</a>
<a href="#" class="alink">Link 2</a>


</body>
</html>

    Mis à JOUR

    créer une fonction qui sera appelée en cliquant sur le lien. Pour cette fonction, passer votre message (n'importe quel nombre de paramètre)

    Si votre lien ressemblera à ceci 

    <a href="#" class="alink" onclick="showTitle('This is the title')">Link 1</a>
<a href="#" class="alink" onclick="showTitle('This is another title')">Link 2</a>

    Fonction ressemble à ce 

    function showTitle(message)
{
    $('#questionMarkId').hide();
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
    $('#questionMarkId').show();
    $('#divTitle').html(message);
}

    Mis à JOUR

    Fonctions avec event paramètre 

    function showTitle(message, evt)
{
   var e = e || evt || window.event;
   //... rest of the code
}
    asifisid88, merci! C'était un exemple parfait. Ma prochaine question est ce, cela fonctionne quand quelqu'un clique sur un lien avec une classe de alink. Comment puis-je morph ce donc, c'est quelque chose que je peux passer paramétrée sur le onclick? Je veux être en mesure de passer de "C'est le titre" et que, comme le innerHTML de la durée avec l'id de divTitle
    asifisid88, encore merci. Votre aide a été fantastique pour un Jquery rookie comme moi. Est-il quelque chose que vous devez faire pour obtenir IE à recoginze les coordonnées de la souris? Cela fonctionne dans Chrome et Firefox (le sens de la div montre au clic de la souris), mais sous IE, la div montre où il est codé sur la page.
    C'est à cause de e.pageY and e.pageX, dans votre fonction de transmettre un paramètre plus event.. donc appel de fonction deviendrait showTitle('msg', event) et de la fonction deviendrait function showTitle(message, evt), puis normaliser le cas de la méthode en elle
    Si vous rencontrez des problèmes de normalisation de l'événement pour IE, voir l'exemple en javascript ci-dessous

    OriginalL'auteur asifsid88

  2. 8

    Avec le contexte fourni par vous, voici une aide:

    $('#questionMarkId').hide();

$('a').on('click', function(e) {
    e.preventDefault();
    $('#questionMarkId').css( 'position', 'absolute' );
    $('#questionMarkId').css( 'top', e.pageY );
    $('#questionMarkId').css( 'left', e.pageX );
    $('#questionMarkId').show();
});

    Et le violon lien: http://jsfiddle.net/m6XPP/

    guy de travail avec le violon devient automatique upvote
    Si c'est une fille?
    pas moins de deux upvotes
    jsfiddle est génial! Excellent outil. Merci... je vais l'utiliser dans l'avenir

    OriginalL'auteur hjpotter92

  3. 1

    Pour obtenir ie pour trouver les coordonnées de la souris, j'ai dû ajouter le texte suivant à la fonction. Je suis surpris de voir qu'il n'est pas plus "Jquery" à la façon de résoudre ce problème. Merci encore à tous pour votre aide!

    var posx;
var posy;
if (typeof e.pageY === "undefined") 

    {       //will e work here?
    posx = window.event.clientX + document.body.scrollLeft 
    + document.documentElement.scrollLeft; 
    posy = window.event.clientY + document.body.scrollTop 
    + document.documentElement.scrollTop; 

    alert("was undefined!");
    } 
else{ 


    posx = e.pageX; 
    posy = e.pageY; 
    alert("was NOT undefined!");

    }
alert("posy:" + posy);
alert("posX:" + posx);
    Juste pour votre information, lorsque vous utilisez === puis il n'est pas besoin d'utiliser typeof comme === elle-même les moyens de vérifier les type ainsi

    OriginalL'auteur E Paiz