文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使Foundation在Foundation 6中工作？

问如何使Foundation在Foundation 6中工作？
EN

Stack Overflow用户

提问于 2016-04-13 08:04:55

回答 2查看 724关注 0票数 1

我不确定为什么这个基本的显示模式不能工作...我遗漏了什么？

<!DOCTYPE HTML>

<html>

  <head>

    <title>index</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="description" />

    <meta name="author">

    <!-- Style Sheets -->

    <link rel="stylesheet" href="css/foundation.min.css" />

    <link rel="stylesheet" href="css/normalize.css" />

    <link rel="stylesheet" href="css/styles.css" />

    <!-- HTML% shiv -->

    <!--[if lt IE 9]>

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

  </head>


  <body>

    <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

    <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

      <h2 id="modalTitle">Lorem Ipsum</h2>

      <p class="lead">Lorem ipsum lorem.</p>

      <p>Lorem ipsum lorem ipsum lorem ipsum.</p>

      <a class="close-reveal-modal" aria-label="Close">&#215;</a>

    </div>



    <script src="js/vendor/jquery.js"></script>

    <script src="js/foundation/foundation.min.js"></script>

    <script src="js/vendor/fastclick.js"></script>

    <script src="js/vendor/modernizr.js"></script>

    <script>
      $(document).foundation();

    </script>


  </body>

</html>

下面是这些文件：

zurb-foundation

zurb-foundation-6

回答 2

Stack Overflow用户

发布于 2016-04-14 00:46:18

您的锚点应该具有data-open="myModal"或data-toggle="myModal"属性。您的close按钮也应该是data-close。

票数 1

Stack Overflow用户

发布于 2016-04-14 21:36:03

看起来您正在使用Foundation 5 appears，它已针对Foundation 6进行了更改。

我在下面重新格式化了你的显示代码块，在关闭按钮和显示块中添加了数据-打开到你的锚点和数据-关闭，显示块有class="reveal"

        <a href="#" data-open="myModal">Click Me For A Modal</a>

        <div id="myModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
            <h2 id="modalTitle">Lorem Ipsum</h2>

            <a class="close-button" data-close aria-label="Close">&#215;</a>
        </div>

Zurb基础6揭示：http://foundation.zurb.com/sites/docs/reveal.html

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36586220

复制

相似问题

问如何使Foundation在Foundation 6中工作？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使Foundation在Foundation 6中工作？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使Foundation在Foundation 6中工作？
EN