彈出式模式在頁面頂部被切斷

Question

Here is a live demo of the modal（應在幾秒後打開。UPDATE：此鏈接現在顯示完成的版本）。

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）。

也可能想要在#top-section上設置background-color: #fff，這樣如果窗口很短，您仍然可以看到文本，否則它會以黑色透明背景上的黑色文本結束。