Foundation Reveal Modal超出可见区域

Foundation Reveal Modal out of visible area

本文关键字：区域 Reveal Modal Foundation      更新时间：2023-09-26

我正试图通过在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>

我不认为这是一个bug，应该根据您的情况对脚本进行修改。您可以通过将模态的css属性设置为"fixed"而不是"absolute"来修改它。不过要注意，在较小的屏幕上查看时添加一些代码，因为那里的模态可能太高，并且存在溢出。

相关文章：