Рост div от позиции курсора вверх и влево

Question

Есть кастомное контекстное меню, надо чтобы оно росло от позиции курсора вверх и влево, а не вниз и вправо.

Сниппет с примером не отрабатывает, видимо из-за event.pageX =((

function reset_menu() {
  $("div").hide();
}

function custom_menu() {
  $left = event.pageX;
  $top = event.pageY;
  $("div").css({
    "top": $top,
    "left": $left
  });
  $(".context").hide().slideDown(100);
}

div {
  display: none;
  position: absolute;
  background: lightblue;
  width: 100px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onclick="custom_menu();" ondblclick="reset_menu();">
  <div></div>
</body>

Answer 1

Ширину и высоту элемента вычитать надо из координат

https://jsfiddle.net/u2y9x6j1/

function reset_menu() {
  $("div").hide();
}

function custom_menu() {

  $left = event.pageX -$("div").width();
  $top = event.pageY - $("div").height();
  $("div").css({
    "top": $top,
    "left": $left,
    "display": "block"
  });  
  $(".context").hide().slideDown(100);
}
document.onclick = () => custom_menu()
document.ondblclick = () => reset_menu();

div {
  display: none;
  position: absolute;
  background: lightblue;
  width: 100px;
  height: 200px;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div></div>
</body>

БЛОГ НА HUSL

Рост div от позиции курсора вверх и влево

Ответы (1 шт):