弹出式模式在页面顶部被切断 [英] Pop-up modal being cut off at top of page

问题描述

下面是模态的现场演示（它应该在几秒后打开。UPDATE：这个链接现在显示完成的版本）。

这里是所有文件的GitHub仓库。（更新：此链接现在显示完成的版本）。

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

在较小分辨率的屏幕上（ see here ）或者当屏幕宽度缩小时（

解决方案 see here ） / b>我会建议对CSS进行以下更改：

• 设置 overflow：hidden code>在 body 上打开弹出窗口。当试图滚动弹出窗口时，这将停止烦人的滚动。


• 删除上的 translate #popup


• 将保证金更改为 auto


• 将顶部和左边更改为 0


• 添加右侧和底部和设置为 0

最后的项目会自动将弹出内容置于窗口，你将能够在弹出的容器div内滚动（这是因为位置设置为绝对）。

也可以在＃top-section 上设置 background-color：#fff ，这样如果窗口很短，你仍然可以看到文字，否则它会以黑色透明背景上的黑色文字结束。

Here is a live demo of the modal (it should open after a few seconds. UPDATE: this link now shows the finished version).

Here is the GitHub repo with all the files. (UPDATE: this link now shows the finished version).

When I scroll up, the top part of the pop-up is cut off but I can't scroll up to see it, despite having overflow-y: scroll; on the pop-up container.

This problem happens (in case you can't see it in the demo) on smaller resolution screens (see here) or when the screen width is contracted (see here).

解决方案

I would recommend the following changes to the CSS:

• Set overflow: hidden on body when the popup is open. That will stop the annoying scrolling of the body when trying to scroll the popup.
• Remove the translate on #popup
• Change the margin to auto
• Change the top and left to 0
• Add right and bottom and set to 0

The last items will automatically center the popup content in the window and you will be able to scroll within the popup container div (this works because the position is set to absolute).

Also might want to set background-color: #fff on #top-section so that if the window is short you can still see the text otherwise it ends up with black text on the dark transparent background.

这篇关于弹出式模式在页面顶部被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！