Question

我已下载新的Zurb Foundation 6完整套餐（网站基金会）。存档文件包含以下文件和文件夹：

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

从控制台。

基础6是一个新版本，我可能会错过一些东西。我从Foundation 5升级到了Foundation 6. Foundation 5 Reveal工作正常，但在更换到新的Foundation 6之后，一些组件开始无法运行。

我检查了文档，初始化和类是一样的。

Answer 1

尝试

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

然后：

popup.open();

我不确定$('#popup-modal').foundation('reveal', 'open');是否适用于基金会6

Answer 2

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

现在很简单 $('#exampleModal').foundation('open')

Answer 3

这两个选项由Juliancwirko＆amp; EddieDean正在工作。但是有区别。

如果您使用“新基金”方法，并且数据选项设置如下：data-options =“closeOnEsc：false; closeOnClick：false;” 他们不会有任何影响。

但如果你使用粉底（'开放'），他们就会工作。

Zurb Foundation 6 Reveal不起作用

3 个答案: