Reveal Modal 内的 Foundation 5 轨道滑块没有高度答案

【问题标题】：Foundation 5 Orbit Slider inside Reveal Modal has no HeightReveal Modal 内的 Foundation 5 轨道滑块没有高度
【发布时间】：2014-01-31 21:05:20
【问题描述】：

这是jsfiddle demonstrating the following issue。

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

<-- 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 属性，因为我的滑块中的内容将具有可变高度，更不用说响应式了，因此像素值不起作用。

【问题讨论】：

感谢您提出这个问题。我有一个类似的问题，但每张幻灯片的大小都需要不同。有什么想法吗？

标签： responsive-design modal-dialog zurb-foundation lightbox orbit

【解决方案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 fix”的那个
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'); 代替$(window).trigger('resize.fndtn.orbit'); 并删除了$(this).find('[data-orbit]').css('height',''); 行。

我 fork 你的jsfiddle 并添加了更改here。

希望对你有帮助。

【讨论】：

非常感谢！我在我的模态中尝试使用 YerSlider。它有效。

【解决方案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;
}

【讨论】：