Positionierung JS Popup in Fx

Question

Ich habe den folgenden Code, der ein Popup unter einem Element positioniert. Dies funktioniert nur richtig, wenn das Fx-Fenster maximiert ist. Was muss ich für die Position des Fensters relativ zum Bildschirm berücksichtigen, so dass es auch für ein Fenster im Normalmodus funktioniert?

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

Verwenden boxObject.screenX, screenY statt 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); 

Aber da gibt es keinen Versatz, dann ist es einfacher Popupanchor zu verwenden und popupalign statt:

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

die bedeutet "positioniere die obere linke Ecke des Popups neben der linken unteren Ecke des Elements". Hinweis x und y muss in diesem Fall -1 sein.

Answer 2

Der Trick ist, CSS zu verwenden und mit Javascript zu zeigen/zu verbergen. Mit CSS können Sie positionieren, wo genau Elemente im Browser angezeigt werden. Absolute Position definiert genau, wo innerhalb des Browsers das Objekt erscheinen soll. Relative Positionierung definiert, wo ein Element im Browser platziert wird, basierend auf seiner Beziehung zu einem anderen Element, das sich bereits auf der Seite befindet. In diesem Beispiel platzieren wir auf Bild 100 Pixel von dem oberen und dem linken des Browserfensters und ein zweites Bild wird 200 Pixel von diesem anfänglichen Bild gerendert.

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

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