Question

我不确定为什么这个基本的揭示模式不起作用......我错过了什么？

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

以下是文件：

Answer 1

您的主播应具有data-open="myModal"或data-toggle="myModal"属性。您的关闭按钮也应为data-close。

Answer 2

看来你正在使用Foundation 5，它已经改为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 Foundation 6揭示：http://foundation.zurb.com/sites/docs/reveal.html

如何让Reveal Modal在Foundation 6中工作？

2 个答案: