Javascript工具提示定位問題

我想創建一個JavaScript彈出使用以下腳本。Javascript工具提示定位問題

var xOffset = 30; 
var yOffset = -5; 

function showPopup (targetObjectId, eventObj) { 
    var newXCoordinate = (eventObj.pageX)?eventObj.pageX + xOffset:eventObj.x + xOffset + ((document.body.scrollLeft)?document.body.scrollLeft:0); 
    var newYCoordinate = (eventObj.pageY)?eventObj.pageY + yOffset:eventObj.y + yOffset + ((document.body.scrollTop)?document.body.scrollTop:0); 
    moveObject(targetObjectId, newXCoordinate, newYCoordinate); 

    -----etc 
} 



function moveObject(objectId, newXCoordinate, newYCoordinate) { 
    // get a reference to the cross-browser style object and make sure the object exists 
    var styleObject = getStyleObject(objectId); 
    if(styleObject) { 

//  newXCoordinate = newXCoordinate-8; 
//  newYCoordinate = newYCoordinate-300; 

     styleObject.left = newXCoordinate; 
     styleObject.top = newYCoordinate; 
     return true; 
    } else { 
     // we couldn't find the object, so we can't very well move it 
     return false; 
    } 
} // moveObject

演示在這裏：

http://jsfiddle.net/jkdYr/

彈出窗口中將顯示成功，但它的定位就成了一個問題。根據光標移動彈出不動態位置。任何人都可以請幫助改變上面的腳本根據光標位置顯示彈出位置。即通常彈出式附加到元素的底部;如果沒有在底部彈出足夠的空間應該重視頂部

感謝

來源

2011-07-29 abhis

你能否在http://jsfiddle.net/ – Sarath

中提供e演示在jsfiddle中添加演示。謝謝 – abhis

你在哪裏添加腳註？不能看到它，但功能正在調用.. – Sarath

我想這是你所需要的：

<li id="list-item" onclick="return !showPopup('product_deatils_2', event);"> 
    <a href="javascript:;">Product2</a> 
    <div onclick="event.cancelBubble = true;" class="popup" id="product_deatils_2"><a href="javascript:;" onclick="hideCurrentPopup(); return false;" title="close" class="popupLink">[x]</a> Popup Text 
    </div> 
</li>

，並在您的JS使用這樣的：

$("#list-item").click(function (e) { 
    $("#product_deatils_2").css("margin-left",e.offsetX); 
    $("#product_deatils_2").css("margin-top",e.offsetY); 
});

讓我知道它是否有幫助:)

來源

2011-07-29 06:17:15

感謝您的回覆。不幸的是，這個問題還沒有解決:-( – abhis

請檢查這一點。這是你看fr嗎？

http://jsfiddle.net/jkdYr/5/

我剛修改過的功能，如

function showPopup(elementN, event){ 
    $("#"+elementN).css({ 
     "display":"block", 
     "top":event.pageY+"px" , 
     "left":event.pageX+"px"  
    }) 
} 
function hideCurrentPopup(ele){ 
    $(ele).parent().hide(); 
}

如果你不使用jquery那麼也可以簡單地用純JS實現。

來源

2011-07-29 07:31:35 Sarath

這也沒有獲得工具提示的動態位置，如果我們再添加一個列表項，我們需要滾動窗口以查看彈出窗口:-( – abhis

是的，如果內容超出窗口高度，你需要向下滾動，或者你想在這種情況下做什麼？ – Sarath

在這種情況下，我想顯示彈出只是相反的順序，即彈出移動到頂部而不是底部 – abhis

Javascript工具提示定位問題

回答

相關問題