web-dev-qa-db-ja.com

Zurb Foundation 6 Revealが機能しない

新しいZurb Foundation 6の完全なパッケージをダウンロードしました（Foundation for Sites）。アーカイブファイルには、次のファイルとフォルダーが含まれています。

[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

JSファイルをフッターに、CSSをヘッダーに含めました。

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

Chromeのエラー

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');

PDATE 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');

コンソールから。

Foundation 6は新鮮なリリースであり、見逃したかもしれません。 Foundation 5からFoundation 6にアップグレードしました。Foundation5 Revealは問題なく動作しましたが、新しいFoundation 6に変更した後、一部のコンポーネントが機能しなくなります。

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

zurb-foundationzurb-foundation-6
11
Idan Shechter

で試す

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

その後：

_popup.open();
_

$('#popup-modal').foundation('reveal', 'open');はFoundation 6では機能しなくなりました。

31
juliancwirko

ZURBのクリスはこちら。プラグインのメソッドを呼び出すにはいくつかの方法があります。以下を参照してください http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use

簡単な「新しい」方法は今です

$('#exampleModal').foundation('open')
18
EddieDean

JuliancwirkoとEddieDeanが提供する両方のオプションが機能しています。しかし、違いがあります。

"new Foundation"アプローチを使用していて、data-optionsも次のように設定している場合：data-options = "closeOnEsc：false; closeOnClick：false;" 効果はありません。

しかし、foundation（ 'open'）を使用している場合は機能します。

3
adelineu