2015-11-22 14 views
8

新しいZurb Foundation 6完全パッケージ(Foundationの基盤)をダウンロードしました。アーカイブされたファイルには、次のファイルとフォルダが含まれています。私がしようとZurb Foundation 6 Revealが動作しない

クロームで

<!-- foundation library and initialization --> 
<script src="/Foundation/js/foundation.min.js"></script> 
<script> 
    $(document).foundation(); 
</script> 

エラー:私は、ヘッダーのフッターにJSファイルやCSSを含ま

[css] > app.css, foundation.css, foundation.min.css [img] > [empty folder] [js] > app.js foundation.js foundation.min.js vendor > jquery.min.js, what-input.min.js 

REVEALコンポーネントを使用する(これはFoundation 5で動作しました)が、今回はエラーになります:

Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for i. 

私はFoundation.min.jsの中を見てきました。そこにはREVEALがあります。完全なパッケージをダウンロードするので、うまくいくはずですが、そうではありません。

モーダルトリガするJSコード:

$('#submit-modal').foundation('reveal', 'open'); 

UPDATE 1:新鮮なページにしようとしました:ポップアップのテキストがページ上に現れた

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="/Foundation/css/foundation.min.css" rel="stylesheet" /> 
</head> 
<body> 
    <div class="row">this is the body of the page</div> 
    <div id="popup-modal" class="reveal-modal full" data-reveal aria-labelledby="pop-up-modal-title" aria-hidden="true" role="dialog"> 
     test 
    </div> 

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

<!-- foundation library and initalization --> 
<script src="/Foundation/js/vendor/what-input.min.js"></script> 
<script src="/Foundation/js/foundation.js"></script> 

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

</body> 
</html> 

を、デフォルトでは隠されていないので、コマンドを実行しようとするとUncaught ReferenceError: We're sorry, 'Reveal' is not an available method for Revealというエラーが表示されます。

$('#popup-modal').foundation('reveal', 'open'); 

コンソールから。

ファンデーション6は新鮮なリリースであり、何かを見逃している可能性があります。 Foundation 5からFoundation 6にアップグレードしました。Foundation 5 Revealは正常に機能しましたが、新しいFoundation 6に変更した後、一部のコンポーネントが機能しなくなります。

ドキュメントを確認しましたが、初期化とクラスは同じです。

答えて

26

その後、

var popup = new Foundation.Reveal($('#popup-modal')); 

で試してみて:

popup.open(); 

をここZURBから財団6で$('#popup-modal').foundation('reveal', 'open');作品

+0

うん、そして彼らはまた、 'reveal-modal'ではなく 'reveal'にクラスを変更しました。作品、ありがとう! –

+1

実際には動作しません。 jQueryの拡張機能としての基盤の署名は、最初の引数をプラグインとして、残りのパラメータをプラグインのオプションとして使用するように変更されました:https://github.com/zurb/foundation-sites/blob/develop/js/foundation .core.js#L250:L284 –

+0

それは私の魅力のように私のために働く。ありがとう! – Combine

16

クリス場合、私はわかりません。あなたが見る、プラグインのメソッドを呼び出すことができるいくつかの方法があります: http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use

簡単な方法は、今Juliancwirko & EddieDeanが提供する両方のオプションが機能している $('#exampleModal').foundation('open')

+0

追加のお返事ありがとう、両方の仕事。 –

+1

本体の代わりに土台6のルート要素にモーダルを追加する方法 – user1801879

+0

同じ問題が発生しました。私は、インターネット上での検索は、基盤5ではなく、基盤5のドキュメンテーションに直接参照されていると思っています。 – nodepond

2

です。しかし違いがあります。

あなたは「新しい財団」アプローチを使用していてもデータ・オプションがある場合はセットのような:データ・オプション=「closeOnEsc:偽; closeOnClick:偽;」 彼らは効果が全くありません

しかし、あなたがfoundation( 'open')を使用している場合、それらは動作します。

関連する問題