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工具提示定位问题

回答

相关问题