javascript - 有谁知道在固定大小的弹出矩形上设置 x/y 位置的简单方法

Question

我需要有一个简单的弹出矩形，最好使用 jQuery 或类似的，它只是显示一个按比例缩小的画布（例如，1:2，代表一个 1000 像素 x 1600 像素的浏览器窗口），可以单击它来获取 x/ y 在整个窗口中的位置。

这实际上只是一种简单、直观的方式来帮助客户在页面上定位内容（它必须完全由他们控制，而不是在网格上）。

有没有人知道那里已经做了这样的事情？（我正在寻找 wordpress 管理员，但应该可以做任何事情）。

编辑以澄清。如果没有任何东西可以做到这一点，我认为这可能会起作用：

如果您单击一个按钮，jQ 一个绝对定位的 div（灯箱样式），其大小与我谈到的一样，然后在单击它时关闭 div，但以某种方式获取单击它的 div 中的 x/y 位置，然后缩放它有一些数学...

我认为我在这里不知道该怎么做是获取相对于特定 div 大小的 x/y 位置。

抱歉，我认为这可能是一个措辞可怕的问题。

Answer 1

$('#popup').css("top", ($(window).height()) / 2 + $(window).scrollTop() + "px");
$('#popup').css("left", ($(window).width()) / 2 + $(window).scrollLeft() + "px");

Answer 2

你的画布需要设置为

position: relative

那么这个元素内的任何东西都可以设置为

position : absolute
top:  [your Y position from top side of the canva]px;
left: [your X position from left side of the canva]px;

绝对位置总是指第一个没有默认定位的元素，在这种情况下是相对的。