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 回答
21

来自 ZURB 的克里斯在这里。有几种方法可以调用插件上的方法，请参阅：http: //foundation.zurb.com/sites/docs/javascript.html#programmatic-use

现在简单的“新”方法是

$('#exampleModal').foundation('open')
于 2015-11-22T20:01:01.080 回答
4

Juliancwirko 和 EddieDean 提供的两个选项都有效。但是有区别。

如果您使用“ new Foundation ”方法并且您还设置了数据选项，例如： data-options="closeOnEsc: false; closeOnClick: false;" 他们不会有任何影响。

但是，如果您使用的是基础（'open'），它们将起作用。

于 2016-01-04T03:26:45.580 回答