div cerca del cursor onclick jQuery

10

me gustaría sugerir la adición de un div oculto:

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

con CSS:

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

y luego muéstrelo:

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

Aquí está un ejemplo completo:

<!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>

Fuente

2009-12-28 00:35:53 cletus

+0

Nada está sucediendo – Rickstar

+0

Bueno, eso es un ejemplo 100% de trabajo allí. ¿Qué significa exactamente "nada está pasando"? – cletus

+0

todo funciona mejor. agregar algunos css y algunos animes pueden obtener buenos resultados – AEMLoviji

1

Hasta que no nos proporciona información más específica, esta es tu solución:

$("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 necesita este .invisiDiv decir al lado del ratón en todo momento, se puede reposicionar dinámicamente de acuerdo a 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 
});

y añadir las siguientes reglas CSS a ella:

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

Fuente

2009-12-28 00:32:27 Sampson

+0

Nada está sucediendo – Rickstar

+0

¿Qué quiere decir, Gully? – Sampson

2

otra manera pudiera ser así

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; 
}

Algunos CSS: demo

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

Trabajando http://jsfiddle.net/a5Zxk/1/

Fuente

2013-05-20 07:08:31 h0mayun

div cerca del cursor onclick jQuery

Respuesta

Cuestiones relacionadas