基础5轨道滑块内部显示模态没有高度

Question

这是一个jsfiddle,展示了以下问题.

我正在使用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修复:

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

我看了下面的参考文献:

• 基础4.1.2:"显示"窗口中未显示"轨道"滑块
  • 你在上面列出的"hacky fixes"
• 在Reveal中使用Orbit时的压缩图片
• 轨道高度未设置在手风琴上.

它看起来像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并在这里添加了更改.

我希望有所帮助.