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');
});

OR

$(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文件并在第280行找到了$(window).on('resize', self.compute_dimensions);。

而不是$(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;
}

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

2 个答案: