鼠标hover弹框,当弹框在页面底部如何使弹框显示完整?

code_idiot
  • 21

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

clipboard.png

回复
阅读 3.9k
3 个回答

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

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

弹出层使用绝对定位;位于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无效;

宣传栏