JavaScript Foundation公開モーダルレンダリング

JavaScriptsファンデーションプラグインの使用、reveal（モーダル）。私は非常に基本的なモーダルを働かせようとしていますが、私はそれを正しく呼んでいるとは思いません。私のベンダーのディレクトリには、foundation.min.jsとfoundation.reveal.jsのコピーがあり、私はちょうどウェブサイトhttp://foundation.zurb.com/sites/docs/reveal.htmlの最初の初心者の例を使って仕事をしようとしています。JavaScript Foundation公開モーダルレンダリング

私のindex.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Testing Foundation</title> 
    <script type="text/javascript" src="vendor/jQuery.js"></script> 
    <script type="text/javascript" src="vendor/foundation.min.js"></script> 
    <script type="text/javascript" src="vendor/foundation.reveal.js"></script> 
    <script type="text/javascript" src="testing.js"></script> 
    </head> 
    <body> 
    <p><a data-open="exampleModal1">Click me for a modal</a></p> 
    <div class="reveal" style="visibility: hidden" id="exampleModal1" data-reveal> 
     <h1>Awesome. I Have It.</h1> 
     <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> 
     <button class="close-button" data-close aria-label="Close modal" type="button"> 
     <span aria-hidden="true">&times;</span> 
     </button> 
    </div> 
    </body> 
</html>

testing.js

$('#exampleModal1').foundation('open');

私はこれが動作するために、私は私のセットアップで間違ったつもりだ場所がわからないのですか？

出典

2016-04-28 adamscott

これは少し考えすぎです。モーダルdivは、それを呼び出すものと同じhtmlファイルの中になければなりません。

Index.htmlと：

<!DOCTYPE html> 
<html class="no-js" lang="en" dir="ltr"> 
    <head> 
    <link rel="stylesheet" href="css/foundation.css"> 
    </head> 
    <body> 
    <div class="row"> 
     <p><a data-open="exampleModal1">Click me for a modal</a></p> 
     <div class="reveal" id="exampleModal1" data-reveal> 
      <h1>Awesome. I Have It.</h1> 
      <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> 
      <button class="close-button" data-close aria-label="Close modal" type="button"> 
      <span aria-hidden="true">&times;</span> 
      </button> 
     </div> 
    </div> 

    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
    </body> 
</html>

先に行くと、文書全体の基盤をインスタンス化します。

app.js：助けを

$(document).foundation()

出典

2016-04-28 02:39:09

感謝。私はこれも気付き、divをindex.htmlに戻そうとしていました。しかし、私はまだモーダルを働かせることができませんでした。私はまた、実際にポップアップするようにdivの可視性を隠して設定しましたか？ページを読み込むと、私は既にdivの内容を見るので。 – adamscott

@adamscottモーダルが隠され、モーダルが機能するために必要なリンク先のfoundation.cssファイルがないようです。 –

インラインスタイルはうまく動作しますが、あなたが言っていることを見て、今もそれを含めましたが、まだ動作していません。 – adamscott

JavaScript Foundation公開モーダルレンダリング

答えて

関連する問題