javascript - 弹出模式在页面顶部被 chop

Here is a live demo of the modal(应该在几秒钟后打开。更新:此链接现在显示完成的版本)。

Here is the GitHub repo with all the files.(更新:此链接现在显示完成的版本)。

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

在较小分辨率的屏幕(see here)上，或者在屏幕宽度缩小(see here)时，会发生此问题(以防在演示中看不到该问题)。

最佳答案

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

打开弹出窗口时，在overflow: hidden上设置body。当尝试滚动弹出窗口时，这将停止正文的恼人滚动。

删除translate上的#popup

将margin更改为auto

将top和left更改为0

添加right和bottom并设置为0

最后一项将自动使弹出窗口内容居中于窗口中，并且您将能够在弹出容器div中滚动(这是有效的，因为位置设置为absolute)。

也可能需要在background-color: #fff上设置#top-section，以便如果窗口很短，您仍然可以看到文本，否则它会在深色透明背景上以黑色文本结尾。