JQuery：单击链接时在鼠标位置显示隐藏的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14825864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Show a hidden div at mouse position when a link is clicked
提问by E Paiz
Suppose I have 2 links in my page and I want a hidden div to appear at the position the mouse is located (mouse x,y) at on the page when either of links is clicked. Also, I'd like to pass in a value to set the title for the div (see divTitle id).
假设我的页面中有 2 个链接，并且我希望在单击任一链接时在页面上鼠标所在的位置（鼠标 x，y）显示一个隐藏的 div。另外，我想传入一个值来设置 div 的标题（请参阅 divTitle id）。
How can I accomplish this using jQuery?
如何使用 jQuery 完成此操作？
Hidden Div:
隐藏分区：
<div class="boxFAQ" id="questionMarkId">
<span id="divTitle"></span>
SHOW ME!
</div>
回答by asifsid88
The below code will give you idea about showing the div. Proceed with your requirements and then hide it accordingly or display message as you need
下面的代码将让您了解显示 div。继续您的要求，然后相应地隐藏它或根据需要显示消息
<!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>
UPDATED
create a function which will be invoked on clicking of the link. To this function pass your message (any number of parameter)
So your link will look like this
UPDATED
创建一个将在单击链接时调用的函数。给这个函数传递你的消息（任意数量的参数）
所以你的链接看起来像这样
<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>
Function will look like this
函数看起来像这样
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);
}
UPDATED
Functions with eventparameter
带event参数的 更新函数
function showTitle(message, evt)
{
var e = e || evt || window.event;
// ... rest of the code
}
回答by hjpotter92
With the context you provided, here's a help:
根据您提供的上下文，这是一个帮助：
$('#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();
});
And the fiddle link: http://jsfiddle.net/m6XPP/
和小提琴链接：http: //jsfiddle.net/m6XPP/
回答by E Paiz
To get ie to find the mouse coordinates, I had to add the following to the function. I'm surprised there isn't a more "Jquery" way to solve this. Thanks again for all your help!
为了让 ie 找到鼠标坐标，我必须将以下内容添加到函数中。我很惊讶没有更“Jquery”的方法来解决这个问题。再次感谢你的帮助！
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);
