JavaScript Foundation显示模态渲染

Question

Working with JavaScripts foundation plugin, reveal (modal). 使用JavaScripts基础插件，显示（模式）。 I am trying to get the very basic modal to work, but I don't think I am calling it correctly. 我正在尝试使用最基本的模式，但是我认为我没有正确地称呼它。 In my vendor directory I have copies of foundation.min.js and foundation.reveal.js and then I am just trying to do work through the first beginner example on the website http://foundation.zurb.com/sites/docs/reveal.html . 在我的供应商目录中，我有foundation.min.js和foundation.reveal.js副本，然后我只是尝试通过http://foundation.zurb.com/sites/docs/网站上的第一个初学者示例进行工作。 discover.html 。

my index.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 testing.js

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

I am not sure where I am going wrong in my setup for this to work? 我不确定在我的设置中哪里出问题了才能正常工作吗？

Answer 1

You're overthinking it a bit. 您想得太多了。 The modal div should be inside the same html file as what is calling it. 模态div应与调用它的HTML文件位于同一HTML文件中。

Index.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>

Go ahead and instantiate Foundation for the entire document. 继续并为整个文档实例化Foundation。

app.js: app.js：

$(document).foundation()

JavaScript Foundation显示模态渲染

问题描述

1 个解决方案

解决方案1
1 2016-04-28 02:39:09

JavaScript Foundation显示模态渲染

问题描述

1 个解决方案

解决方案1 1 2016-04-28 02:39:09

解决方案1
1 2016-04-28 02:39:09