基础显示模式不起作用

Question

我在 ember 应用程序中使用 Foundation，并试图让我的登录/注册表单成为一个显示模式。我在基金会的网站上找到了有关如何执行此操作的构建块教程，但它似乎不起作用。有关如何解决此问题的任何想法？

这是模板代码：

<a href="#" data-reveal-id="LogInModal" class="button">Launch Signup Modal</a>

<div id="LogInModal" class="reveal-modal remove-whitespace" data-reveal>
<div class="row">
    <div class="large-6 columns auth-plain">
      <div class="signup-panel left-solid">
        <p class="welcome">Registered Users</p>
        <form>
          <div class="row collapse">
            <div class="small-2  columns">
              <span class="prefix"><i class="fi-torso-female"></i></span>
            </div>
            <div class="small-10  columns">
              <input type="text" placeholder="email">
            </div>
          </div>
          <div class="row collapse">
            <div class="small-2 columns ">
              <span class="prefix"><i class="fi-lock"></i></span>
            </div>
            <div class="small-10 columns ">
              <input type="text" placeholder="password">
            </div>
          </div>
        </form>
        <a href="#" class="button ">Log In </a>
      </div>
    </div>

    <div class="large-6 columns auth-plain">
      <div class="signup-panel newusers">
        <p class="welcome"> New User?</p>
        <a href="#" class="button ">Sign Up</a>
      </div>
    </div>

   </div>   
  <a class="close-reveal-modal">&#215;</a>
</div>

这是必要的自定义样式：

/* Styles for signup panels */
.auth-plain {
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}

.left-solid {
margin-top: 0px;
margin-bottom: 0px;
}

.signup-panel {
  border-radius: 5px;
  padding: 15px;
  margin-top: 30px;
  margin-bottom: 30px;
  background: #fff;
}

.signup-panel a{
  color: #fff;
}

.signup-panel i {
  font-size: 30px;
  line-height: 50px;
  color: #999;
}
.signup-panel form input, .signup-panel form span {
  height: 50px;
}
.signup-panel .welcome {
  font-size: 26px;
  text-align: center;
  margin-left: 0;
}
.signup-panel p {
  font-size: 13px;
  font-weight: 200;
  text-align: center;
}
.signup-panel .button {
  margin-left: 35%;
}

.newusers {
  background: #fff;
}

Answer 1

通过添加以下内容来初始化页面上的 Foundation 插件：

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

就在结束 </body> 标记之前。更多信息在Foundation docs。