如何让 Foundation 中的 Revel 模式正常工作？

Question

我正在尝试使用 Foundation 来使显示模式正常工作。当我点击下面的 link 时，没有任何反应。当我加载页面时，显示了模态中的内容，但看起来很奇怪。

<!doctype html>
    <html class="no-js" lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Foundation for Sites</title>
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
      </head>
      <body>
        <div class="row">
          <div class="large-12 columns">
            <h1>Welcome to Foundation</h1>
            <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">Awesome. I have it.</h2>
                  <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>
                  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
                </div>


          </div>
        </div>


        <script src="js/vendor/jquery.js"></script>
        <script src="js/vendor/what-input.js"></script>
        <script src="js/vendor/foundation.min.js"></script>
        <script src="js/app.js"></script>

        <script>
            $('#myModal').foundation('open')
        </script>
      </body>
    </html>

Answer 1

您是否在使用 Foundation 6 个示例？

而不是 data-reveal-id，使用 data-open 或 data-toggle 来定位你的揭示：

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

如何让 Foundation 中的 Revel 模式正常工作？

How to get revel modal in foundation to work properly?

javascript

jquery

zurb-foundation