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

时间:2013-07-16 14:37:12

标签: css css-position

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

这是我的代码:

a span {
display: none;
}

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

提前感谢您的帮助! : - )

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

似乎一直有效回到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');
            }
        }
    });
});

答案 2 :(得分:0)

将更好地使用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;
}