如何定位基础上，将光标显示点击

我试图位置下方的弹出DIV的位置弹出一个DIV：基于另一个div的点击如何定位基础上，将光标显示点击

<div style="display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div>

。

我的文档。就绪

$('div#d').bind('click', function (event) { 
var offset = $(this).offset(); 
$('#popup').css('left',offset.left);  
$('#popup').css('top',offset.top); 
$('#popup').css('display','inline');   
});

运行这一点，但上面甚至不会显示在div

来源

2012-02-09 some_bloody_fool

的问题在于该偏移量（事实）不返回正确的鼠标位置，尝试event.pageX和event.pageY代替：

$(document).ready(function(){ 
    $('div#d').bind('click', function (event) { 
    $('#popup').css('left',event.pageX);  // <<< use pageX and pageY 
    $('#popup').css('top',event.pageY); 
    $('#popup').css('display','inline');  
    $("#popup").css("position", "absolute"); // <<< also make it absolute! 
    }); 
});

见。

来源

2012-02-09 23:07:56 Gigi

如果含元素是位置：绝对或相对，定位弹出绝对导致其出现相对于容器，而不是页。 – 2013-06-14 01:52:54

为了便于参考和改进，这里的的jsfiddle：https://jsfiddle.net/hwsamuel/fsp5pgqw/ – 2016-04-01 17:19:26

尝试增加position: absolute到您的股利。确保它不在具有相对定位的另一个div内。

<div style="position: absolute; display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div>

顶部和元素与relative，absolute或fixed定位只留下工作。

来源

2012-02-09 22:52:23 mrtsherman

是用于显示DIV工作很好，谢谢你，但它不是定位在光标单击了 – 2012-02-09 22:56:09

你确定该分区是不是里面别的，具有相对定位的DIV？尝试使它成为你身体的第一个或最后一个项目。 – mrtsherman 2012-02-09 22:59:46

如何定位基础上，将光标显示点击

回答

相关问题