javascript - 使 jQuery Popbox 在其父级之外可见

Question

使用 jQuery popbox 库 ( http://gristmill.github.io/jquery-popbox/index.html ) 我遇到了以下问题:

我有一个巨大的 div，它的溢出设置为自动。它实际上是一个锦标赛网格，显示了很多要进行的比赛。每个匹配项(单独的 div)都有一个小信息图标，单击后，我使用 Popbox 在出现的窗口中显示其他信息。

这一切都正常工作，但是，每当我按下靠近底部或父 div 左侧的信息图标时，它的溢出设置为自动，弹出框窗口的一部分是不可见的因为它最终在父 div 之外。我正在寻找一种用户友好的方式来解决这个问题。

将父级的 div 溢出设置为可见不是一个选项，因为如果它变得太大，我需要滚动条出现。不过，如果我能让 Popbox 窗口超出父 div 并完全可见，那就太好了。

我现在能想到的另一个想法是为靠近边缘的信息图标设置特殊类，并将弹出框窗口调整到右侧/顶部，以便它在父 div 中可见，而不管它是否溢出。

Answer 1

我建议你使用一些特殊的类并使弹出窗口在顶部/右侧“弹出”。
你可以在这里看到一个例子:http://getbootstrap.com/javascript/#popovers
如果你想使用 Bootstrap，你可以在这里进行自定义构建:http://getbootstrap.com/customize/?id=6493526
popover css+js只是额外的~10k min+gzip