javascript - 浏览器视口(viewport)外的模态弹出窗口

Question

我的网站上有一个用于注册的弹出窗口。当此弹出窗口在手机上打开时，它对于浏览器视口(viewport)来说太高了，一些内容出现在它之外。

当我尝试向下滚动时，它会滚动背景。如果我使用 overflow-y: hidden 锁定背景，则根本不会滚动。

弹出窗口随窗口滚动，锁定在同一位置。我不想将位置锁定在页面顶部，而是让它始终出现在视口(viewport)的顶部，但应该可以滚动查看其所有内容。

有人知道如何解决这个问题吗？

Answer 1

您可以使用 media 类型为移动设备、平板电脑等编写 CSS 规则。例如，如果您希望在模态内容中具有滚动功能，您可以执行以下操作:

@media (max-width: 767px) {
    .modal-content { overflow-y: scroll; }
}