Question

我正在使用CSS在我的页面上创建弹出窗口。我在标签内设置了display：none;。然后，当您将鼠标悬停在标记上时，弹出该单词的定义。这对我来说很有用，但有时弹出窗口出现在浏览器窗口之外。有没有办法确保整个弹出窗口使用CSS保持在浏览器窗口内，所以我需要添加一些Javascript？我真的希望弹出窗口显示在链接的位置，但我不在乎它是向左还是向右移动以便在窗口内可见。

这是我的代码：

a span {
display: none;
}

a:hover span {
display: block;
position: absolute;
width: 300px;
z-index: 1000;
}

提前感谢您的帮助！： - ）

Answer 1

您可以使用jQuery检查弹出窗口的角落是否在窗口内。看看这个：How to check if an element is off-screen

Answer 2

所以，如果你把课程＆＃34; hvrpop-link＆＃34;在你悬停在上面和下面的元素上，你把这个类放在＆＃34; hvrpop-win＆＃34;在弹出窗口/菜单上。然后，以下内容将弹出窗口/菜单轻推到左侧，足以将其保留在屏幕上。注意 - 您已经在弹出窗口中留下了一个保证金，您可能需要将其保存在＆＃34;数据＆＃34;如果你调整窗口大小，它会回到正确的位置。

似乎一直有效回到IE7：

$(function() {
    $('.hvrpop-link').hover(function() {
        var win=$(this).find('.hvrpop-win:visible');
        if(win.length>0) {
            var screenwidth=$('body').width();
            var width=win.width();
            var pos=win.position();
            var rightpos=width+pos.left;
            if(rightpos>screenwidth) {
                var moveleft=rightpos-screenwidth;
                win.css('margin-left','-'+moveleft+'px');
            } else {
                win.css('margin-left','0px');
            }
        }
    });
});

Answer 3

将更好地使用css代码：

a span {
    position: absolute;
    z-index: 100000;
    display: none;
    min-width: 100px;
    max-width: 50%;
    left: 50%;
    margin-left: -25%;
}
a:hover span {
    display: block;
}

弹出窗口部分显示在浏览器窗口之外

3 个答案: