Question

我想使用以下脚本创建一个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/

Popup会成功显示，但它的定位成为一个问题。弹出窗口没有根据光标移动获得动态位置。任何人都可以请求帮助改变上面的脚本根据光标位置显示弹出位置。即，通常弹出附加到元素的底部;如果底部没有足够的空间，弹出窗口应该附上顶部

由于

Answer 1

我认为这就是你所需要的：

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

让我知道它是否有帮助：）

Answer 2

请检查一下。这是你看的吗？

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实现。

Javascript工具提示定位问题

2 个答案: