如何让Foundation 5在太大时显示模态滚动条？

我正在使用揭示模式。根据窗口大小，内容可能太大而不适合屏幕。如何让Foundation 5在太大时显示模态滚动条？

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

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

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

2016-07-24 DAB

就不得不提到的门槛高度为揭示模态，之后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; 
}

来源

2016-07-26 08:46:42

这个问题是，现在它是一个固定的高度，它不会总是工作取决于屏幕大小。尽管我认为这是一部绷带，但我确实找到了另一种方式。 – DAB

如果使用多个屏幕是您的问题，那么您可以使用CSS媒体查询为不同屏幕提供不同的高度。或者，您也可以提及'％'值而不是'px'values。但是，如果你的目标是完美的话，你将不得不使用媒体查询。 –

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

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

来源

2016-07-26 19:41:03 DAB

添加类的“全”，以“揭示模态”和高度将被设置为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>

这里的my example page

来源

2016-08-16 03:46:04 asonnenshine

如何让Foundation 5在太大时显示模态滚动条？

回答

相关问题