Question

在我的项目中，基金会的模式对我不起作用。

我已经确认了基础和jQuery的加载以及基础模式的CSS可以工作，但它没有按原样触发。

有趣的是，如果你运行

$(document).ready(function(){
    var popup = new Foundation.Reveal($('#videoModal'));
    popup.open();
});

在浏览器控制台中，出现模态。所以，我有信心js和css可用。

我无法解决为什么锚点上的点击事件没有按原样触发它的原因。我已按照此页面上的建议进行操作：https://foundation.zurb.com/sites/docs/reveal.html

我的测试代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Testing Modal from Foundation</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/assets/dist/styles/app.css">
  </head>
  <body>
    <div style="margin-top: 200px;" class="video-callout">
      <a data-open="videoModal">
        <h6>Watch the video</h6>
      </a>
    </div>

    <div class="reveal" id="videoModal" data-reveal>
      <h1>Hey!</h1>
    </div>

    <script src="/assets/dist/scripts/vendor/jquery.min.js"></script>
    <script src="/assets/dist/scripts/vendor/foundation.min.js"></script>
  </body>
</html>

Answer 1

$(document).foundation();

被排除在文件之外，这似乎是罪魁祸首。

基金会[6.4.3]＆amp; jQuery [3.2.1]显示模态不起作用

1 个答案: