14

新しい 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');

更新 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 にアップグレードしました。Foundation 5 Reveal は正常に機能しましたが、新しい Foundation 6 に変更した後、一部のコンポーネントが機能しなくなりました。

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

4

3 に答える 3

40

試してみてください

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

その後：

popup.open();

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

于 2015-11-22T17:04:09.260 に答える
4

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

「new Foundation」アプローチを使用していて、data-options="closeOnEsc: false; closeOnClick: false;" のようにデータ オプションを設定している場合。それらは効果がありません。

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

于 2016-01-04T03:26:45.580 に答える