Foundation 6でModal Revealを使用するにはどうすればよいですか？

なぜこの基本的な公開モーダルが機能していないのか分かりません...何が欠けていますか？Foundation 6でModal Revealを使用するにはどうすればよいですか？

<!DOCTYPE HTML> 

<html> 

    <head> 

    <title>index</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

    <meta name="description" /> 

    <meta name="author"> 

    <!-- Style Sheets --> 

    <link rel="stylesheet" href="css/foundation.min.css" /> 

    <link rel="stylesheet" href="css/normalize.css" /> 

    <link rel="stylesheet" href="css/styles.css" /> 

    <!-- HTML% shiv --> 

    <!--[if lt IE 9]> 

     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 

     <![endif]--> 

    </head> 


    <body> 

    <a href="#" data-reveal-id="myModal">Click Me For A Modal</a> 

    <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 

     <h2 id="modalTitle">Lorem Ipsum</h2> 

     <p class="lead">Lorem ipsum lorem.</p> 

     <p>Lorem ipsum lorem ipsum lorem ipsum.</p> 

     <a class="close-reveal-modal" aria-label="Close">&#215;</a> 

    </div> 



    <script src="js/vendor/jquery.js"></script> 

    <script src="js/foundation/foundation.min.js"></script> 

    <script src="js/vendor/fastclick.js"></script> 

    <script src="js/vendor/modernizr.js"></script> 

    <script> 
     $(document).foundation(); 

    </script> 


    </body> 

</html>

そして、ここではファイルです：

出典

2016-04-13 sanlorena

は、あなたもあなたのコードをしてくださいフォーマットさことができます。 JS基礎スクリプトを追加しましたか？ – general03

あなたのアンカーは属性data-open="myModal"またはdata-toggle="myModal"を持つ必要があります。閉じるボタンはdata-closeである必要があります。

出典

2016-04-13 16:46:18 EddieDean

あなたが財団5明らかにするを使用している、それは私が閉じるボタンに開いているアンカーおよびデータ・クローズにデータ・オープンを追加下記のお明らかにするコードブロックを再フォーマットした財団6.

のために変更されたことが表示されますそして、class="reveal"を持っているブロックを明らかにする：

 <a href="#" data-open="myModal">Click Me For A Modal</a> 

     <div id="myModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
      <h2 id="modalTitle">Lorem Ipsum</h2> 

      <a class="close-button" data-close aria-label="Close">&#215;</a> 
     </div>

Zurb財団6は明らかに：http://foundation.zurb.com/sites/docs/reveal.html

出典

2016-04-14 13:36:03

Foundation 6でModal Revealを使用するにはどうすればよいですか？

答えて

関連する問題