javascript - 鼠标hover弹框，当弹框在页面底部如何使弹框显示完整？

Question

1、给a标签添加hover事件，鼠标悬浮时弹框，当a标签在页面底部时，弹框虽然可以显示，右侧的滚动条高度确实也增加了，但是滚动的时候，弹框没办法显示完整。
2、下面是截图

Answer 1

你判断当前的滚动距离和页面的整体滚动高度。如果说 整体滚动高度-滚动距离 < 弹框 那你就让他上去。用relative可以，absoltue也可以。

Answer 2

可以使用fixed定位，使弹框相对于屏幕定位，不随滚动条滚动

Answer 3

弹出层使用绝对定位；位于body层之上；

样式，弹出窗口居中

    .popup{
        position:fixed;
        margin:auto;
        left:0;
        right:0;
        top:12px;
        bottom:0;
        width:300px;
        height:350px;
        background: red;
        z-index: 1010;
    }

显示弹出层，禁用滚动

    $("a").hover(function(){
        $('body').css("overflow", "hidden");
        $(".popup").show();
    },function(){
        $('body').css("overflow", "visible");
        $(".popup").hide();
    });

在IE下需要注意子元素position:relative会使其overflow无效；