Как позиционировать всплывающий элемент div в зависимости от того, где щелкает курсор

Question

Я пытаюсь расположить всплывающее окно ниже:

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

См. здесь .

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.