Question

使用JavaScripts基础插件，揭示（模态）。我试图让非常基本的模态工作，但我认为我没有正确地调用它。在我的供应商目录中，我有foundation.min.js和foundation.reveal.js的副本，然后我只是尝试通过网站http://foundation.zurb.com/sites/docs/reveal.html上的第一个初学者示例来完成工作。

我的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Testing Foundation</title>
    <script type="text/javascript" src="vendor/jQuery.js"></script>
    <script type="text/javascript" src="vendor/foundation.min.js"></script>
    <script type="text/javascript" src="vendor/foundation.reveal.js"></script>
    <script type="text/javascript" src="testing.js"></script>
  </head>
  <body>
    <p><a data-open="exampleModal1">Click me for a modal</a></p>
    <div class="reveal" style="visibility: hidden" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <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>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </body>
</html>

testing.js

$('#exampleModal1').foundation('open');

我不知道在我的设置中我出错了在哪里工作？

Answer 1

你有点过分思考它。模态div应该在与调用它相同的html文件中。

的index.html：

<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="css/foundation.css">
  </head>
  <body>
    <div class="row">
        <p><a data-open="exampleModal1">Click me for a modal</a></p>
        <div class="reveal" id="exampleModal1" data-reveal>
          <h1>Awesome. I Have It.</h1>
          <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>
          <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
    </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

继续并为整个文档实例化Foundation。

app.js：

$(document).foundation()

JavaScript Foundation揭示模态渲染

1 个答案: