javascript - Foundation Reveal Modal 超出可见区域

Question

我正在尝试通过在 Rails 应用程序中使用 Foundation 5 来使用模式

问题是，如果您没有向下滚动页面，模态框会起作用。

如果您转到底部并单击模态按钮，当它激活时，它不会显示。

这里面有错误还是我做错了什么？

<%= link_to "Register to Unlock", new_subscription_path, class:"unlock", "data-reveal-id" => "firstModal" %>


<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal aria-labelledby="firstModalTitle" aria-hidden="true" role="dialog">
  <h2 id="firstModalTitle">This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
  <h2 id="secondModalTitle">This is a second modal.</h2>
  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Answer 1

我不认为这是一个错误，应该根据您的情况对脚本进行修改。您可以通过将模式设置为“固定”而不是“绝对”来修改模式的 css 属性。请注意，在较小的屏幕上查看时要添加一些代码，因为小屏幕上的模态可能太高并且会溢出。