Zurb Foundation Reveal 模式不起作用答案

【问题标题】：Zurb Foundation Reveal modal not workingZurb Foundation Reveal 模式不起作用
【发布时间】：2016-06-01 13:24:28
【问题描述】：

我在 Angular JS 项目中使用 Zurb Foundation 5.5.3，并尝试执行显示模式。我在社区寻找这个问题，但没有成功的解决方案，因为我没有忘记 data-reveal 属性或者我不想调用 JS via .

这是我的代码：

<div class="small-1 columns">
    <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
</div>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

它与 Foundation 文档中的 code example 相同。当我点击链接时，没有出现模式，页面被重定向到主页。

有什么想法吗？

提前致谢！

【问题讨论】：

你确定你在 Foundation 之前引用了 jQuery 文件吗？另外，控制台有错误吗？
你在打电话给$(document).foundation()吗？

标签： zurb-foundation zurb-foundation-5

【解决方案1】：

您在这里引用了一个类似的问题： Foundation and AngularJS

在使用 Foundation 5 和 AngularJS 时，JavaScript 摘要循环存在冲突，因此默认情况下它们不会一起工作。

我已经成功使用了两种不同的解决方案：

我更喜欢使用后者。

【讨论】：