Question

我刚刚开始使用基金会，而我正在努力弄清楚模态是如何工作的。我试图通过在空白的php页面上使用exemple模式来实现一个，但我无法像this one does一样滑动它。

但是我的内容会在没有滑动的情况下淡入淡出，我无法找到重现我链接的动画的方法。有人有什么建议吗？这是我的测试页面的代码：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">

        <!-- jQuery -->
        <script type="text/javascript" src="/core/foundation/js/vendor/jquery.js"></script>

        <!-- Foundation 5 -->
        <link rel="stylesheet" href="/core/foundation/css/foundation.css">
        <script src="/core/foundation/js/foundation/foundation.js"></script>
        <script src="/core/foundation/js/foundation/foundation.reveal.js"></script>

    </head>
    <body>

        <!-- Triggers the modals -->
        <a href="#" data-reveal-id="firstModal" class="radius button">Modal in a modal&hellip;</a>
        <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal with Video&hellip;</a>

        <!-- Reveal Modals begin -->
        <div id="firstModal" class="reveal-modal" data-reveal aria-labelledby="firstModalTitle" aria-hidden="true" role="dialog">
            <h2 id="firstModalTitle">This is a modal.</h2>
            <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
            <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
            <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>

        <div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
            <h2 id="secondModalTitle">This is a second modal.</h2>
            <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>

        <div id="videoModal" class="reveal-modal large" data-reveal aria-labelledby="videoModalTitle" aria-hidden="true" role="dialog">
            <h2 id="videoModalTitle">This modal has video</h2>
            <div class="flex-video widescreen vimeo">
                <iframe width="1280" height="720" src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>

            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>
        <!-- Reveal Modals end -->

        <script>
            $(document).foundation('reveal', {animation: 'fadeAndPop'});
        </script>

    </body>
</html>

非常感谢，

-Apatik

基础模态不会在显示

0 个答案: