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

Question

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

我怀疑我的问题在于使用display：table作为模态，我正在这样做，以便模态适合其中子元素的高度。我猜它与我尝试使用的max-height，overflow：auto等奇怪的组合有冲突。任何建议都非常感谢。

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

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

Answer 1

将此属性添加到.popup CSS。 overflow-y：auto;

这应解决div中的滚动问题。要调整大小，可以在用户滚动窗格或视图时调用方法$（window）.resize（）。