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 ) 时会发生此问题(以防您在演示中看不到它)。
最佳答案
我建议对 CSS 进行以下更改:
- 当弹出窗口打开时,在
body
上设置overflow: hidden
。这将停止在尝试滚动弹出窗口时烦人的正文滚动。 - 删除
#popup
上的translate
- 将
margin
更改为auto
- 将
top
和left
改为0
- 添加
right
和bottom
并设置为0
最后一项会自动将弹出窗口内容居中,您将能够在弹出容器 div 内滚动(这是有效的,因为位置设置为 absolute
)。
也可能想要在 #top-section
上设置 background-color: #fff
这样如果窗口很短你仍然可以看到文本否则它会结束深色透明背景上带有黑色文字。
关于javascript - 弹出模式在页面顶部被 chop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42775664/