modal-dialog - 同一基础 6 的多个触发器显示模式导致关闭时不需要的滚动

Question

我有一个带有单个 Foundation 6 Reveal 模态的登录页面。模式包含页面的联系表单。因此，该模式可以由出现在页面不同位置的多个按钮触发。所有按钮都应打开相同的“联系表单”模式。

单击任何按钮确实可以毫无问题地打开模式。但是，当我们关闭模态框时——点击模态框内的“关闭”按钮，或按键盘上的“Esc”键——页面会自动滚动到的位置页面上的最后一个按钮 是模式的触发器。似乎在“关闭”时，模态会强制视口(viewport)滚动到 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');
});