弹出模式在页面顶部被切断

Question

这是模式的现场演示（它应该在几秒钟后打开。更新：此链接现在显示完成的版本）。

这是包含所有文件的 GitHub 存储库。（更新：此链接现在显示完成版本）。

当我向上滚动时，弹出窗口的顶部被切断，但我无法向上滚动查看它，尽管位于overflow-y: scroll;弹出容器上。

在较小分辨率的屏幕上（请参阅此处）或当屏幕宽度收缩时（请参阅此处），会发生此问题（如果您在演示中看不到它）。

Answer 1

我建议对 CSS 进行以下更改：

• 当弹出窗口打开时设置overflow: hidden为打开。body当尝试滚动弹出窗口时，这将阻止令人讨厌的正文滚动。
• 删除translate上#popup
• 更改margin为auto
• 将top和更改left为0
• 添加right和bottom并设置为0

最后的项目将自动将弹出内容在窗口中居中，并且您将能够在弹出容器 div 内滚动（这有效，因为位置设置为absolute）。

还可能需要设置background-color: #fff为#top-section这样，如果窗口很短，您仍然可以看到文本，否则最终会在深色透明背景上显示黑色文本。