Zurb foundation 如何在基础6中进行揭示模态工作?

Zurb foundation 如何在基础6中进行揭示模态工作?,zurb-foundation,zurb-foundation-6,Zurb Foundation,Zurb Foundation 6,我不知道为什么这个基本的揭示模式不起作用。。。我错过了什么 <!DOCTYPE HTML> <html> <head> <title>index</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="content-type" conten

我不知道为什么这个基本的揭示模式不起作用。。。我错过了什么

<!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>

指数
乱数假文
Lorem ipsum Lorem

Lorem ipsum Lorem ipsum Lorem ipsum


您的锚应该具有属性
data open=“myModal”
data toggle=“myModal”
。你的关闭按钮也应该是<代码>数据关闭< /代码> .< /p> < p>看来你正在使用基础5显示,它已经为基础6改变了。 我已经在下面重新格式化了您的显示代码块,将打开的数据添加到打开的锚中,并将数据添加到关闭按钮附近,显示代码块将具有
class=“reveal”


乱数假文

请您将代码格式化好吗。你添加了JS基金会脚本吗?
        <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>