zurb-foundation - 当 Foundation 5 太大时，如何让其显示模式可滚动？

Question

我正在使用显示模式。根据窗口大小，内容可能太大而无法在屏幕上显示。

无论我做什么，我都无法滚动查看所有内容。我尝试使模态本身溢出-y：auto;，但这没有帮助。

下面的屏幕截图来自一个设置为移动设备大小的 chrome 窗口。表单底部有一个按钮，因为看不到，所以无法按下。

窗口和模态内容都将滚动。此外，模式的顶部似乎太低了，但这似乎并没有改变底部按钮的可访问性。

Answer 1

您必须提及显示模式的阈值高度，之后overflow-y将考虑并出现滚动条。

.reveal-modal
{
  max-height:initial; //reset any max-height set by foundation defaults
  height:600px; //replace value with your desired height
  overflow-y:scroll;
}

Answer 2

在移动模式下，我能够将高度设置为 60%，上边距为 20% 和 100vh。我还必须将对话框位置更改为固定并禁用滚动设置，我认为这是 5.2.2 之后的新增功能，这可以解释为什么我最近才在更新后才开始遇到此问题。这是我能够做到的：

https://github.com/macdabby/Lightning/commit/202ae9156ebf034c8cb4b625161015763fa0658f

Answer 3

将“full”类添加到“reveal-modal”，高度将设置为 100% 可滚动：

<div id="myModal" class="reveal-modal full" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

在这种模式下，我注意到背景覆盖（阴影和边框）有问题，所以我添加了以下 CSS 来删除背景覆盖：

<style>
.reveal-modal {
    border:0 none;
    box-shadow:none;
}
.reveal-modal-bg {
    background-color: transparent;
}
</style>

这是我的示例页面