使用响应高度/滚动使弹出模式居中

Question

好的，我正在为我们的网站构建一个弹出窗口。我需要它在屏幕上居中，设置最大宽度和最大高度值，这样它就不会是屏幕的 100%。我还希望它在适用于 y 轴时显示滚动条。

我怀疑我的问题在于使用 display: table 作为模态，我这样做是为了使模态适合其中子元素的高度。我猜它与我试图使用的最大高度、溢出：自动等的奇怪组合有冲突。任何建议都非常感谢。

这是一个带有 SASS/标记的演示。如果您将浏览器的大小调整为较短，您可以看到它不会将其设置为滚动，而是将框的边缘放在屏幕之外。

http://codepen.io/heatherthedev/pen/deauy

Answer 1

将此属性添加到您的 .popup CSS 中。溢出-y：自动；

这应该可以解决该 div 中的滚动问题。对于调整大小，您可以在用户滚动窗格或视图时调用方法 $(window).resize()。