positionnement JS popup dans Fx

Question

J'ai le code suivant qui positionne une popup sous un élément. Cela ne fonctionne correctement que si la fenêtre Fx est agrandie. Que dois-je ajouter pour tenir compte de la position de la fenêtre par rapport à l'écran, donc cela fonctionne aussi bien pour une fenêtre en mode Normal?

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

Utilisez boxObject.screenX, screenY au lieu de 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); 

Mais puisqu'il n'y est décalé, il est plus simple à utiliser et popupanchor popupalign à la place:

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

qui signifie "positionner le coin supérieur gauche du popup à côté du coin inférieur gauche de l'élément". Remarque x et y doit être -1 dans ce cas.

Answer 2

L'astuce consiste à utiliser CSS et afficher/masquer avec javascript. Avec CSS, vous pouvez placer où exactement les éléments apparaîtront dans le navigateur. Position absolue définit exactement où dans le navigateur que l'élément doit apparaître. Le positionnement relatif définit où un élément est placé dans le navigateur en fonction de sa relation avec un autre élément déjà présent sur la page. Dans cet exemple, nous plaçons sur l'image 100 pixels à partir du haut et à gauche de la fenêtre du navigateur et une seconde image sera rendue à 200 pixels de cette image initiale.

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

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