모달 창의 Zurb 궤도가 정확하게 크기 조정되지 않음

Question

모달 안에 Foundation 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

은 내가 그것을 할 것이라고 믿습니다 :

<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 빌드입니다.