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

Att*_*ila 3 html javascript css modal-dialog

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

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

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

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

小智 5

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

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

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

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