浏览器视口外的模态弹出窗口

Question

我的网站上有一个弹出窗口可以进行一些注册。 当这个弹出窗口在手机上打开时，它对于浏览器视图端口是高的，并且一些内容不在它之外。

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

弹出窗口滚动窗口，锁定在同一个地方。 我想不将位置锁定到页面顶部，并使其始终显示在视图端口的顶部，但应该可以滚动查看其所有内容。

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

Answer 1

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

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

Answer 2

查看Bootstrap modal manager大例子。他们删除了正文中的溢出（溢出：隐藏）并为模态提供了一个完整的宽度/高度包装器，这个包装器有溢出：auto;这使得除了正文页面的外观是静态的，页面滚动只移动模态。

Answer 3

如果容器超过视口高度，这将显示一个垂直滚动条：

.some-modal {
    maxHeight: 100vh;
    overflowY: 'auto';
    overscrollBehavior: 'contain'; /* <-- nice to have but not required */
}