Reveal Modal内部的基础5轨道滑块没有高度

Question

这是一个jsfiddle demonstrating the following issue。

我正在使用Foundation 5框架并尝试在Orbit Slider中包含Reveal Modal，但由于某种原因滑块没有给出合适的高度。

<-- Button to Reveal Modal -->
<a href="#" data-reveal-id="myModal" data-reveal class="button radius">Click For Modal</a>

<!-- Modal Popup that is revealed -->
<div id="myModal" class="reveal-modal" data-reveal>
    <ul data-orbit>
        <li><img src="http://placekitten.com/400/300" /></li>
        <li><img src="http://placekitten.com/400/300" /></li>
        <li><img src="http://placekitten.com/400/300" /></li>
    </ul>
</div>

请注意，如果在模式打开的情况下调整浏览器窗口的大小，它会自动将其自身校正到适当的高度。此问题存在于以前版本的Foundation中，因此hacky fixes弹出如下：

$('.reveal-modal').on('opened', function(){
    $(this).find('[data-orbit]').css('height','');  
    $(window).trigger('resize.fndtn.orbit');
});

但是，此修复程序不再适用于最新版本的Foundation。有没有办法让它运作？

请注意，我不想简单地指定一个min-height css属性，因为我的滑块中的内容将具有可变高度，更不用说响应，因此像素值不起作用。

Answer 1

总之，我相信这就是答案：

$(document).foundation();

$('.reveal-modal').on('opened', function(){
    $(window).trigger('resize');
});

要么

$(document).foundation();

$(document).on('opened', '[data-reveal]', function () {
    $(window).trigger('resize');
});

我看了下面的参考文献：

• Foundation 4.1.2: Orbit slider not shown in Reveal window 你在上面列出的“hacky fixes”
• Squashed picture when using Orbit in a Reveal
• Orbit height not set on accordion。

看起来4.1.2的旧hack只是调用compute_dimension方法来调整模态一旦打开就调整大小。我查看了foundation.orbit.js文件，找到了$(window).on('resize', self.compute_dimensions);，在第280行附近。

而不是$(window).trigger('resize.fndtn.orbit');我使用$(window).trigger('resize');并删除线$(this).find('[data-orbit]').css('height','');。

我分叉你的jsfiddle并添加了变化here。

我希望有所帮助。

Answer 2

对于使用Foundation 6的任何人（我的遗留项目是在6.2.4上），我通过添加以下css代码来修复此问题：

div.gallery-in-modal .orbit-container {
    height: auto !important;
}
div.gallery-in-modal .orbit-container .orbit-slide {
    max-height: initial !important;
}