Zurb Foundation 6 Reveal 不起作用
Zurb Foundation 6 Reveal doesn't work
我已经下载了新的 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 后,一些组件开始无法正常工作。
我查了文档,初始化和类是一样的。
试试
var popup = new Foundation.Reveal($('#popup-modal'));
然后:
popup.open();
$('#popup-modal').foundation('reveal', 'open');
不再适用于 Foundation 6。
这里是来自 ZURB 的 Chris。有几种方法可以调用插件上的方法,请参阅:
http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use
现在最简单的 "new" 方法是
$('#exampleModal').foundation('open')
Juliancwirko 和 EddieDean 提供的两个选项都有效。但是还是有区别的。
如果您使用的是“new Foundation”方法并且您还设置了 data-options,例如:data-options="closeOnEsc: false; closeOnClick: false;" 它们不会有任何效果。
但如果您使用的是粉底 ('open'),它们会起作用。
我已经下载了新的 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 后,一些组件开始无法正常工作。
我查了文档,初始化和类是一样的。
试试
var popup = new Foundation.Reveal($('#popup-modal'));
然后:
popup.open();
$('#popup-modal').foundation('reveal', 'open');
不再适用于 Foundation 6。
这里是来自 ZURB 的 Chris。有几种方法可以调用插件上的方法,请参阅: http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use
现在最简单的 "new" 方法是
$('#exampleModal').foundation('open')
Juliancwirko 和 EddieDean 提供的两个选项都有效。但是还是有区别的。
如果您使用的是“new Foundation”方法并且您还设置了 data-options,例如:data-options="closeOnEsc: false; closeOnClick: false;" 它们不会有任何效果。
但如果您使用的是粉底 ('open'),它们会起作用。