Question

我已经使用基金会几年了，但是在我升级到基金会5之前，我还没有遇到过JS插件的问题。我已经运行了bower＆＃39;捆绑＆＃39;并更新了文件路径，但无论如何，除非通过控制台手动调用，否则像Reveal和Joyride这样的插件根本不会触发。开发工具不会丢失任何错误或显示任何丢失的文件，因此我不确定发生了什么。

这是我的超级基本标记：

<html class='no-js' lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <link href='stylesheets/app.css' rel='stylesheet'>
    <script src='bower_components/modernizr/modernizr.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
  </head>
  <body>
    <div class='row'>
      <div class='small-12 columns'>
        <a data_reveal_id='myModal' href='#'>
          <button>Hello!</button>
        </a>
      </div>
    </div>
    <div class='reveal-modal' data_reveal id='myModal'>
      <h1>I'm a modal!</h1>
      <a class='close-reveal-modal'>&#215;</a>
    </div>
    <script src='bower_components/foundation/js/foundation.min.js'></script>
    <script src='bower_components/fastclick/lib/fastclick.js'></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

任何帮助都会非常感激！我已经尝试检查我能找到的其他所有帖子，但我还没有看到类似的问题。

Answer 1

您的代码中有2个错误。

不要使用下划线，使用连字符使数据属性起作用正确地
不要将按钮放在锚标签内，按钮就足够了。

像这样：

<html class='no-js' lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <link href='stylesheets/app.css' rel='stylesheet'>
    <script src='bower_components/modernizr/modernizr.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
  </head>
  <body>
    <div class='row'>
      <div class='small-12 columns'>
        <!--<a data_reveal_id='myModal' href='#'>-->
          <button data-reveal-id='myModal'>Hello!</button>
        <!--</a>-->
      </div>
    </div>
    <div class='reveal-modal' data-reveal id='myModal'>
      <h1>I'm a modal!</h1>
      <a class='close-reveal-modal'>&#215;</a>
    </div>
    <script src='bower_components/foundation/js/foundation.min.js'></script>
    <script src='bower_components/fastclick/lib/fastclick.js'></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Foundation 5 JS插件不起作用

1 个答案: