如何定位基礎上，將光標顯示點擊

我試圖位置下方的彈出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

如何定位基礎上，將光標顯示點擊

回答

相關問題