div près de curseur onclick jQuery

10

Je vous suggère d'ajouter un div caché:

<div id="message"> 
This is a message 
</div>

avec CSS:

#message { position: absolute; display: none; }

, puis affichez-le:

$("#equipment").click(function(evt) { 
    $("#message").css({ 
    top: evt.pageY, 
    left: evt.pageX 
    }).toggle(); 
});

Voici un exemple complet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#equipment").click(function(evt) { 
    $("#message").css({ 
     top: evt.pageY + 5, 
     left: evt.pageX + 5 
    }).show(); 
    }); 
}); 
</script> 
<style type="text/css"> 
html, body, div { margin: 0; padding: 0; border: 0 none; } 
#wrapper { margin: 0 auto; width: 600px; } 
#equipment { color: green; } 
#message { display: none; position: absolute; text-align: center; padding: 10px; width: 120px; background: red; color: white; font-weight: bold; } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <span id="equipment">incididunt ut labore et dolore</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<div id="message">This is a message</div> 
</div> 
</body> 
</html>

Source

2009-12-28 00:35:53 cletus

+0

Rien ne se passe – Rickstar

+0

Eh bien c'est un exemple 100% de travail là-bas. Que signifie exactement "rien ne se passe"? – cletus

+0

tous les travaux greate. l'ajout de css et certains animés peuvent obtenir un bon résultat – AEMLoviji

1

Jusqu'à ce que vous nous donnez des informations plus spécifiques, voici votre solution:

$("span#equipment").click(function(){ 
    $(".invisiDiv").show(); // .toggle() if you need it to close with next click 
});

-

<p><span id="equipment">Equipment</span></p> 
<div class="invisiDiv" style="display:none;"> 
    <p>This div will be shown once you click on the span element above</p> 
</div>

Si vous avez besoin de ce .invisiDiv-à-dire à proximité de votre souris à tout moment, vous pouvez dynamiquement repositionner selon the current x/y position of the mouse:

$("span#equipment").click(function(e){ 
    $(".invisiDiv") 
    .css({top:e.pageX,left:e.pageY}) 
    .show(); // .toggle() if you need it to close with next click 
});

et ajoutez les règles CSS suivantes à elle:

.invisiDiv { position:absolute; width:100px; height:15px; }

Source

2009-12-28 00:32:27 Sampson

+0

Rien ne se passe – Rickstar

+0

Que voulez-vous dire, Gully? – Sampson

2

une autre façon pourrait être comme ça

HTML:

<span>click!</span>

Jquery:

$('span').click(function() 
{ 
    $(this).showDiv('<div>I AM DIV</div>'); 
}); 

//plugin 
jQuery.fn.showDiv = function (html) 
{ 
    var pos = $(this).position(); 
    $(html).insertAfter('span').css({ 
     position: "absolute", 
     top: (pos.top + 20) + "px",//customize top position 
     left: (pos.left) + "px"//customize left position 
    }).fadeIn(); 
    return this; 
}

Certains CSS:

div{ 
    background:red; 
    display:none;height:50px;width:50px 
} 
span{ 
    position:absolute; 
    top:20px; 
    left:50px; 
    background:green; 
}

travail démo http://jsfiddle.net/a5Zxk/1/

Source

2013-05-20 07:08:31 h0mayun

div près de curseur onclick jQuery

Répondre

Questions connexes