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

Question

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

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

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

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

Answer 1

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

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

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

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