2013-02-23 87 views
1

我正在使用jQuery mobile。在我的網頁中,我創建了一個數據角色爲標題的div。在這裏面,有一個圖像。
現在,我創建了另一個具有數據角色彈出窗口的div。當頁面加載時,帶彈出窗口的div按預期隱藏。
當用戶點擊圖像時,預期會顯示彈出窗口。
它的確如此。問題在於它以與標題重疊的方式顯示,並緊挨着觸發彈出窗口的圖像下方顯示。無法在jquery mobile中彈出位置

我通過它傳遞以下選項

$("#navBar").popup("open", { 
    x: 0, 
    y: 50, 
    transition: "reverse slide" 
}); 

這不會做的伎倆,呼籲圖像選擇彈出方法。相反,彈出窗口顯示在觸發它的圖像的正下方。如果刪除了X和Y選項,則彈出窗口顯示在窗口的中心。

一些更多信息 - 這裏是jquery的移動已準備的代碼:

<div class="ui-popup-container reverse slide in ui-popup-active" id="navBar-popup" style="max-width: 1271px; top: 30px; left: 15px;" tabindex="0"> 

這可以看出,jQuery的移動已經加入定型頂部= 30像素和左= 15像素。
爲了滿足我的需求,我希望top = 40px和left = 0px。我想在不覆蓋基本CSS的情況下做到這一點。我希望傳遞給popup()方法的X和Y選項能夠做到這一點,但它們不起作用!
一個Image的問題有助於理解。

+1

您還需要發佈您的HTML頁面代碼,這是不夠的。 – Gajotres 2013-02-23 11:27:48

回答

1

默認情況下,彈出窗口會嘗試在打開它的元素的頂部直接定位,如果您使用API​​並指定x和y,它會嘗試在給定座標處彈出中心。但爲了避免彈出顯示屏幕,jquery mobile還會在彈出對話框和屏幕邊緣之間強制填充,默認情況下,這些填充邊距爲30垂直和15水平。所以你的小狗被定位的原因是由於這些容差。

要將彈出位置定位到所需的精確x和y位置,您需要將彈出窗口寬度的一半添加到所需的x,並將彈出窗口的一半高度添加到所需的y。

+0

無論我在打開的選項中以「y」參數發送的值如何,我都無法覆蓋底部屏幕偏移量的jquery行爲。 任何想法? – Roshdy 2014-12-29 08:53:49