Same Foundation 6的多个触发器显示模式导致关闭时不需要的滚动

Question

我有一个带有单个Foundation 6 Reveal模式的登陆页面.模态包含页面的联系表单.因此,该模式可以由出现在页面上不同位置的几个按钮触发.所有按钮都应打开相同的"联系表单"模式.

单击任何按钮确实打开模式没有问题.但是,当我们关闭模态时 - 通过单击模态内的"关闭"按钮,或者通过点击键盘上的"Esc" - 页面会自动滚动到页面上最后一个按钮的位置,该按钮是模态.似乎在'close'上模态强制视口滚动到DOM中的最后一个触发器!

显然,这是不受欢迎的行为 - 因为大多数时候访问者不会通过点击最后一个按钮打开模态...

CodePen说明了这个问题:https://codepen.io/icouto/pen/QgJzoJ

代码摘要:

<!-- first trigger button -->
<p><button id="btn1" class="button" data-open="exampleModal1">Click me for a modal</button></p>

<!-- lots of filler text to make the page long -->
<p>lorem ipsum dolor sit amet, etc. etc. etc. </p>

<!-- second trigger button -->
<p><button id="btn2" class="button" data-open="exampleModal1">Click me for a modal</button></p>

<!-- modal window -->
<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <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>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

如果单击顶部按钮打开模态,然后关闭模态,您将自动进入页面底部...

我做错了什么吗？有没有我错过的东西？是否有解决方法,不涉及在每个触发器旁边放置模态的多个副本？

任何指导表示赞赏!

Answer 1

@Thomas Jefferson关于为什么会发生这种情况的解释是正确的,但他的解决方案并不令人满意.要解决此问题,您必须自己手动打开模态.

替换class="button" data-open="exampleModal1"为class="button trigger-example-modal".

然后添加这个javascript:

$('.trigger-example-modal').on('click', function() {
  $('#exampleModal1').foundation('open');
});