基礎を正しく動作させるにはどうすればいいですか？

私は、公開モーダルを働かせるためにFoundationを使用しようとしています。下のリンクをクリックすると、何も起こりません。ページを読み込むと、モーダルのコンテンツが表示されますが、非常に奇妙に見えます。基礎を正しく動作させるにはどうすればいいですか？

<!doctype html> 
    <html class="no-js" lang="en" dir="ltr"> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Foundation for Sites</title> 
     <link rel="stylesheet" href="css/foundation.css"> 
     <link rel="stylesheet" href="css/app.css"> 
     </head> 
     <body> 
     <div class="row"> 
      <div class="large-12 columns"> 
      <h1>Welcome to Foundation</h1> 
      <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">Awesome. I have it.</h2> 
        <p class="lead">Your couch. It is mine.</p> 
        <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> 
        <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
       </div> 


      </div> 
     </div> 


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

     <script> 
      $('#myModal').foundation('open') 
     </script> 
     </body> 
    </html>

出典

2016-07-13 sharataka

あなたはFoundation 6例を使用していますか？

代わりのdata-reveal-id、あなた明らかにするターゲットにdata-openまたはdata-toggleを使用します。

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

出典

2016-07-13 16:23:26 Simon

データ・オープンは、モーダルを開きますが、それは今...私は上の写真が含まれます非常に奇妙に見えます。 – sharataka

カスタムスタイルが適用されていますか？基礎スタイルシートのみを使用しても、それは同じように見えますか？ – Simon

基礎を正しく動作させるにはどうすればいいですか？

答えて

関連する問題