3

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

这是我的代码：

a span {
display: none;
}

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

预先感谢您的帮助！:-)

4

3 回答 3

3

因此，如果您将类“hvrpop-link”放在您将鼠标悬停在其上方和下方的元素上，则您将类“hvrpop-win”放在弹出的窗口/菜单上。然后以下内容会将弹出窗口/菜单向左轻推以使其保持在屏幕上。注意 - 如果您已经在弹出窗口上有一个margin-left，您可能需要将其保存在“数据”或其他内容中，以便在您调整窗口大小时它会回到正确的位置。

它似乎一直可以回到 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');
            }
        }
    });
});
于 2014-11-17T13:17:06.607 回答
1

您可以使用 jQuery 检查弹出窗口的角是否在窗口内。看看这个：如何检查一个元素是否在屏幕外

于 2013-07-16T14:40:18.507 回答
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;
}
于 2013-07-16T14:55:24.127 回答