Question

我正在尝试将弹出式div放在下面：

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

基于另一个div的点击。

我在文档.ready

上运行它

$('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

Answer 1

问题在于offset（）没有返回正确的鼠标位置，请尝试使用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!
    });
});

请参阅here。

Answer 2

尝试将position: absolute添加到您的div中。确保它不在另一个具有相对位置的div中。

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

左上角仅适用于relative，absolute或fixed定位的元素。

如何根据光标所在的位置定位弹出div

2 个答案: