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

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

这是我的代码：

a span {
display: none;
}

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

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

---

因此，如果您将类“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');
            }
        }
    });
});

---

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

---

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

链接地址: http://www.djcxy.com/p/14629.html

上一篇: popup displaying partly outside browser window

下一篇: Use jQuery to hide a DIV when the user clicks outside of it