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

Question

Here is a live demo of the modal（它应在几秒钟后打开。更新：此链接现在显示已完成的版本）。

Here is the GitHub repo with all the files.（更新：此链接现在显示已完成的版本）。

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

在较小分辨率的屏幕（see here）或屏幕宽度缩小（see here）时，会出现此问题（如果您无法在演示中看到）。

Answer 1

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

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

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

也可能想在background-color: #fff设置#top-section，这样如果窗口很短，你仍然可以看到文字，否则它会在深色透明背景上以黑色文字结束。