Question

我有以下代码在一个元素下定位一个弹出窗口。仅当Fx窗口最大化时，此方法才能正常工作。我可以添加什么来计算窗口相对于屏幕的位置，所以它也适用于普通模式下的窗口？

var elm = document.getElementById("back-forward-dropmarker");
var x = elm.boxObject.x;
var y = elm.boxObject.y + elm.boxObject.height + 19;
document.getElementById("backForwardMenu").showPopup(elm, x, y, "popup", null, null);

Answer 1

诀窍是使用CSS并使用javascript显示/隐藏。使用CSS，您可以定位项目在浏览器中显示的位置。绝对位置精确定义了项目应在浏览器中出现的位置。相对定位根据其与页面上已有的另一个项目的关系定义项目在浏览器中的放置位置。在此示例中，我们将图像放置在距浏览器窗口顶部和左侧100个像素的位置，第二个图像将从该初始图像渲染200个像素。

<img style="position: absolute; top: 100px; left: 100px;" 
src="images/logo1.gif">

<img style="position: relative; top: 200px; left: 200px;" 
src="images/logo2.gif">

Answer 2

使用boxObject.screenX，screenY而不是x，y：

var elm = document.getElementById("back-forward-dropmarker");
var mnu = document.getElementById("backForwardMenu");

var x = elm.boxObject.screenX;
var y = elm.boxObject.screenY + elm.boxObject.height;

mnu.showPopup(elm, x, y, "popup", null, null);

但由于没有偏移，因此使用popupanchor和popupalign更简单：

mnu.showPopup(elm, -1, -1, "popup", "bottomleft", "topleft");

表示“将弹出窗口的左上角放在元素左下角旁边”。注意 x 和 y 在这种情况下必须为-1。

在Fx中定位JS弹出窗口

2 个答案: