Question

使用Chrome 50＆amp; JQuery 3.1.1我试图让基本的Reveal模式工作。我已经复制了Zurb网站上基本示例中的代码，并将其放在我页面的body标签中。

<a href="#" data-reveal-id="myModal" id="test">++</a>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Security Details</h2>
   <p>My message</p>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

我已经确认所有库都在加载。我页面上的最后一个脚本是

<script>
    $(document).foundation();
</script>

我知道它正在工作，因为我正在使用其他有效的基础元素。

当我点击链接“++”时，我的控制台出现错误

未捕获的TypeError：无法读取null的“defaultView”属性

如果我再运行

$（'＃myModal'）。foundation（'reveal'，'open'）;

在控制台上显示“显示”对话框，然后直到我重新加载页面“++”链接也工作。所以我猜测设置中的某个地方链接的click事件不起作用，但是JQuery错误消息没有意义。

有什么想法吗？（我也在使用JQuery Migrate库）

Answer 1

我认为你的问题是jQuery 3（https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed）中引入的重大变化，特别是.load的删除，你可能会在某种程度上意识到你正在使用迁移库，所以我不会喋喋不休。

迁移似乎并不总是适用于遗留版本的Foundation（请参阅此处的问题：https://github.com/zurb/foundation-sites/issues/8975），但为什么对于几个不同的意见来说更加含糊一些。

好消息是你有两个固定选项。

修复第一个选项

Zurb建议修复是手动修补所有已损坏的引用.load。我找不到F5的列表，但这里是F6中的一个，我猜它们非常相似（pr＆gt;＆gt; https://github.com/zurb/foundation-sites/pull/8923/commits/c0b42643da96d3b297f3d7c35ccdcebed92ad7a1）。这不是很多文件，受影响的文件是：

DIST / foundation.js
DIST /插件/ foundation.interchange.js
DIST /插件/ foundation.util.triggers.js
JS / foundation.interchange.js
JS / foundation.util.triggers.js

他们都是同一个问题;使用折旧的.load(fn)

如果你感觉非常大胆，你可以全局替换所有的实例：

.load(function () {

带

.on("load", function () {

修复选项2

使用jQuery Migrate的1.4.1版。我不完全确定为什么1.4.1在更高版本没有时会起作用（或者为什么它们完全跳过版本2）但是确实如此，所以这可能是一个很好的开始。（3.0.0＆amp; 3.0.1-rc都会产生错误，这些错误在尝试让jQuery 3工作时看起来有点反直觉）。

使用F 5.5.3，JQ 3.1.1＆amp; JQM 1.4.1＆gt;＆gt; https://jsfiddle.net/tymothytym/fxbk6h1d/

Answer 2

tymothytym 答案的替代方法是让您的链接手动调用基础显示方法。即

替换您的模态链接：

{ "name": "User One", "image": ["f0f159c7238b8c9a1a3e5c9bd48de2a5cJ8Y4ssqzcuoWJAS1614581337EC2fGzmRCjf9wphI.webp", "f0f159c7238b8c9a1a3e5c9bd48de2a5tvof9EarZgvupGpa1614581337zvPSnQchCjSL9lZS.webp"], }

到

<a data-reveal-id="myModal" data-reveal>

然后将此添加到您的js代码中以捕获点击并手动打开模态：

<a data-legacy-reveal-id="#myModal">

Foundation 5显示不使用JQuery 3.1.1

2 个答案: