模式窗口中的Zurb軌道沒有正確調整大小

Question

嘗試將基金會Zurb的軌道特徵包含在模態中。模式需要爲每張幻燈片調整大小。

目前它調整到最大幻燈片的最大高度（即整個模態窗口）。相反，我需要定位<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

我beleive，這將做到這一點：

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

雖然我不喜歡使用'！重要'我覺得在這種情況下它這不是一個很大的問題。另外我無法獲得任何js解決方案。

注意這是爲Fdn 6.3.1構建。