2009-07-01 54 views
0

我有下面的代碼來定位一個元素下的彈出框。只有在Fx窗口最大化的情況下,這才能正常工作。我爲什麼添加了窗口相對於屏幕的位置,所以它也適用於正常模式下的窗口?在JSF中定位JS彈出框

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); 

回答

0

使用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"); 

這意思是「將元素左下角旁邊的彈出框的左上角放置」。在這種情況下,注意xy必須爲-1。

0

訣竅是使用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">