Foundation 5 Orbit Slider inside Reveal Modal has no Height

http://stackoverflow.com/questions/21490016/foundation-5-orbit-slider-inside-reveal-modal-has-no-height

HTML

<link rel="stylesheet" href="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/css/foundation.5.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<a href="#" data-reveal-id="myModal" data-reveal class="button radius">Click For Modal</a>

<div id="myModal" class="reveal-modal" data-reveal>
    <ul id="my-data-orbit" 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>

JavaScript

//I added foundation to my External Resources
$(document).foundation();

/*
$(document).on('opened', '[data-reveal]', function () {
    $(window).trigger('resize');
});
*/

$('.reveal-modal').on('opened', function () {
    $(window).trigger('resize');
});