Question

尝试在模态中包含Foundation Zurb的Orbit功能。模态需要为每张幻灯片调整大小。

目前它正在调整到最大幻灯片的最大高度（即整个模态窗口）。相反，我需要定位<li class="active">并调整模态窗口的大小以适合该元素。

<script>
$('#introModal').on('opened', function(){
    $(window).trigger('resize');
});

$("#introModal").on("after-slide-change.fndtn.orbit", function(event, orbit) {
  console.info("after slide change");
    $(window).trigger('resize');
});
</script>


<div class="row">
  <a href="#" data-reveal-id="introModal" data-reveal class="button radius">Click For Modal</a>
</div>

<div id="introModal" class="reveal-modal medium" data-reveal>
<ul data-orbit>

  <li>
    <h2>Slide 1</h2>
    <p>Some content in here.</p>
    <img src="http://placekitten.com/400/300" />
  </li>

  <li>  
    <h2>Slide 2</h2>
    <p>A description goes in here. This slide is larger and should expand.</p>
    <img src="http://placekitten.com/400/600" />
  </li>

</ul>
</div>

Answer 1

我相信这会做到：

<script>
    $("#introModal").on("after-slide-change.fndtn.orbit opened", function (event, orbit) {
        $(window).trigger('resize');
        var active = $(this).find("li.active")
        if (active.length > 0) {
             $(this).find(".orbit-slides-container").height(active.innerHeight()+20);
        }
        return false;
    });
</script>

Answer 2

只需将其添加为模态容器中的额外类： <ul class="orbit-container orbit--modal">

以及以下css一切正常（对我来说）： .orbit--modal { height: auto !important; }

就像我不喜欢使用'！important'一样，我觉得在这种情况下它不是那么重要。另外，我无法使用任何js解决方案。

请注意，这是针对Fdn 6.3.1版本的。

模态窗口中的Zurb轨道未正确调整大小

2 个答案: