是否有可能有一个突然出现溢出的弹出式div:滚动或溢出:自动容器？

Question

我有一个包含弹出菜单的可滚动区域.从概念上讲,这样的事情:

<div style="overflow:auto; width:100px; height:100px">
  ... content here that's big enough to trigger scrollbars...
  <div>
    <a href="javascript:$('#popup').show()">Click here</a>
    <div style="position:relative">
      <div id="popup"
           style="display:none; position:absolute; width:150px; height:150px">
        ... more content. This div gets shown and hidden by jquery on click events.
      </div>
    </div>
  </div>
</div>

问题是当弹出菜单弹出时,它也包含在滚动div中,并且无论我制作z-index有多高,它都不会出现在100x100像素可滚动区域之外.我当然意识到,从某种意义上说,当我告诉外部div溢出时,正是我所要求的:首先是auto.但对于我的用例,它不是我想要的 - 我希望弹出菜单"在顶部"并且能够延伸到可滚动区域之外,同时仍然保持在正确的位置,也就是说,直接位于"点击此处"链接.即使"点击此处"链接可以在容器滚动时移动.

我也意识到我可以使用一些复杂的解决方法,比如将弹出窗口完全放在可滚动的div之外并使用javascript来定位它.然后我需要对滚动事件作出反应,以便在内容滚动时重新定位等等.除了需要编写大量代码以重新实现"position:relative/position:absolute"给我的免费内容之外,这也需要对我自己的代码进行相当多的重构,所以我宁愿避免使用它.

我想知道是否有一些简单的技巧我可以应用于我的内部div来告诉它忽略它的容器的"溢出"属性,或者,如果失败了,一个方便的jquery脚本将在幕后为我实现复杂的东西所以我只需要调用它来获得我所追求的效果.

Answer 1

我要说如果不使用JS来计算链接的位置然后显示弹出位置就不可能做到这一点:固定..

问题是你的弹出窗口在div overflow:auto里面,而div 里面的所有内容都会影响滚动,所以为了显示弹出窗口,你需要将它带到div之外,我知道这样做的唯一方法就是使用position:fixed ...(或者可能在弹出窗口中使用position:absolute,以及包含位置的包装div:包含文本和弹出窗口的relative)

所以我会提出3个解决方案:

1. 使用滚动将弹出窗口放在div之外,当用户单击链接时,显示弹出窗口
2. 计算链接(x,y)的确切位置,并使用position:fixed和坐标显示弹出窗口
3. 使用一个漂亮且易于使用的"消息框"(例如http://csscody.com/demo/wp-content/demo/popup/demo.htm)我知道这不是你想要的,但是......我用完了想法= D.

我希望这有帮助

Answer 2

使用"overflow:auto","overflow:scroll"或"overflow:hidden"在div中显示弹出窗口将始终产生此类问题.根据规则,在所有这些情况下,元素子元素不能显示在父元素的边界之外,因为overflow属性恰恰就是这样.对弹出窗口使用" position:fixed "将解决您的问题但是如果向下滚动,您将看到弹出窗口如何在滚动事件之前的旧位置显示.要解决这个问题,您可以使用JQuery,如下所示:

$(".your-popup-PARENT-class").live( {
    mouseenter: function(event) {
        event.stopPropagation();
        var position = $(this).offset();
        $(this).find(".your-popup-class").css("top", (position.top + 30) );
        $(this).find(".your-popup-class").css("left", position.left);
        $(this).find(".your-popup-class").css("display", "inherit");
    },
    mouseleave: function(event) {
        event.stopPropagation();
        $(this).find(".your-popup-class").css("display", "none");
    }
});

此代码段在DOM树上查找弹出父元素,保存当前位置并在父节点的相同位置显示弹出窗口.如您所见,您可以添加或删除所需的像素(先前CSS顶部定义中的粗体代码).

希望这对于遇到此类问题的其他人来说也是如此.

亲切的问候!