ファウンデーション6モーダルは動作しません

私は誰かがこれを手伝うことができると考えていました。私はファンデーション6でのモーダル公開のアニメーションを手に入れることはできません。私は基本的には、ドキュメントからそのままコピー＆ペーストしましたが、何も書いていません。私は他の人が問題を抱えているのを見ていますが、解決策のどれも私を助けてくれないようです。ファウンデーション6モーダルは動作しません

ここに私の完全なコードです。

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
     <link rel="stylesheet" href="css/themeat.min.css" /> 
     <link rel="stylesheet" href="css/styles.css" /> 
     <link rel="stylesheet" href="css/app.css"> 
    </head> 
<body> 

<p><a data-toggle="animatedModal10">Click me for a modal</a></p> 

<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out"> 
    <h1>Whoa, I'm dizzy!</h1> 
    <p class='lead'>There are many options for animating modals, check out the Motion UI library to see them all</p> 
    <button class="close-button" data-close aria-label="Close reveal" type="button"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
</div> 


    <script src="js/vendor/jquery.min.js"></script> 
    <script src="js/vendor/what-input.min.js"></script> 
    <script src="js/foundation.min.js"></script>  
    <script src="js/app.js"></script> 
    <script src="js/view.js?auto"></script> 

<script> 
    $(document).ready(function() { 
     $(document).foundation(); 
    }) 
</script> 

    </script> 

    </body> 
</html>

ご協力いただければ幸いです。 :)

おかげで、Foundationのマニュアルhttp://foundation.zurb.com/sites/docs/reveal.html、私は彼らがボタンでデータ-open属性を使用している見ていで

出典

2016-05-27 Cameron

ボタンをクリックするとどうなりますか？コンソールにJSエラーがありますか？ – Yass

こんにちはYass - これだけ> "Foundationプラグインを既に持っている要素の公開を試みました。" これは$（document）.foundation（）のものです。私は必要とは思わないコード行。私はそれが同じ問題を持つ他の誰かのために働くように思われたので、そこに置くだけです... – Cameron

申し訳ありませんが、私はボタンをクリックすると、モーダルボックスが表示されますが、私はそれを閉じるためにクリックします。 – Cameron

モーションUIのCSSファイルが含まれていないと思いますが、モーダルをアニメーション化する必要があります。

https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css

docsからコピーされたコードを使用した作業例を参照してください。 http://codepen.io/shoaibik/pen/RRwWKg

出典

2016-05-27 17:48:31

うん、それはそれを修正しました！ :)ありがとう、Shoaib！ – Cameron

。データトグルの代わりにデータオープンを使用することをお勧めします。

<p><a data-open = "animatedModal10">Click me for a modal</a></p>

出典

2016-05-27 12:14:00 chinmayahd

ねえ、戻ってくれてありがとう。私はそれも気付いたが、彼らのアニメーションにはそれを使用しているようには見えない> http://foundation.zurb.com/sites/docs/reveal.html#animations 私はとにかくそれを追加しようとしたが、何かをする...それは本当にイライラしている！ – Cameron

ファウンデーション6モーダルは動作しません

答えて

関連する問題