div near cursor onclick jQuery_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-14 18:51 出处：网络

I am trying to show a div near the cursor when you click on开发者_如何学编程 a span with the id as equipment in jquery and cssI\'d suggest adding a hidden div:

相关专题：jquery onclick

I am trying to show a div near the cursor when you click on开发者_如何学编程 a span with the id as equipment in jquery and css

I'd suggest adding a hidden div:

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

with CSS:

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

and then show it:

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

Here's a complete example:

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

Until you give us more specific information, here's your 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>

If you need this .invisiDiv to say near your mouse at all times, you can dynamically reposition it according to 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
});

And add the following CSS rules to it:

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

another way could be like this

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

Some CSS:

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

Working demo http://jsfiddle.net/a5Zxk/1/

div near cursor onclick jQuery

精彩评论

关注公众号

热门标签

图文推荐

div near cursor onclick jQuery

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：