在Zurb Foundation的一个html文件中使用两个模态的意外行为

Question

Fiddle link我有两个模态登录＆amp;注册，他们应该运行 通过单击导航中的相应链接，每个链接都可以工作 单独罚款，第二个我只取消第二个模态标记 其中一个工作，通常是html文件中的第一个优先。该  代码如下：

当我点击登录时会发生什么，它会打开第一个模态 没有问题，然后我关闭它，然后单击注册按钮，没有 一切都发生了。再次单击登录将显示新元素 加载了注册模式内容。这很奇怪

<div class="menu-group-right condense">
<ul class="icon-left primary menu-bar condense">
    <li><a href="#" zf-open="loginModal"><img zf-iconic="" 

icon="Account" size="small" class="iconic-color-primary">Sign In</a></li>
        <li><a href="#" zf-open="signupModal"><img zf-iconic="" icon="Circle-check" size="small" class="iconic-color-primary">Sign up</a></li>
    </ul>
</div>
</div>
</nav>



<div zf-modal="" id="loginModal" class="collapse">
  <div class="grid-block vertical">
    <div class="primary title-bar">
      <div class="center title">Sign In</div>
        <span zf-close="" class="right"><a><img zf-iconic="" icon="Circle-x" size="small" class="iconic-color-primary">Close</a></span>
        </div>
        <div class="grid-content padding" style="padding-top: 1rem;">
              <form>
              <div class="grid-block">
                <div class="small-12 medium-6 grid-content">

                  <label>Username</label>
                  <input type="text" name="username" />                  
                  <label>Password</label>
                  <input type="password" name="password" />
            </form>
        <input class"button" type="submit" value="Sign In" />
        </div>
  </div>
</div>

<div zf-modal="" id="signupModal" class="collapse">
  <div class="grid-block vertical">
    <div class="primary title-bar">
      <div class="center title">Sign Up</div>
        <span zf-close="" class="right"><a><img zf-iconic=""  icon="Circle-x" size="small" class="iconic-color-primary">Close</a></span>
        </div>
        <div class="grid-content padding" style="padding-top: 1rem;">
            <form>
              <div class="grid-block">
                <div class="small-12 medium-6 grid-content">
                  <label>First Name</label>
                    <input type="text" name="firstName" />

                  <label>Last Name</label>
                    <input type="text" name="lastName" />
                  <label>Email</label>
                    <input type="text" name="email" />
                    <label>Username</label>
                    <input type="text" name="username" />
                  <label>Password:</label>
                  <input type="password" name="password" />
            </form>
        <input class"button" type="submit" value="Sign up" />
        </div>
  </div>
</div>enter code here