css - 如何用 Zurb Modal 填满整个屏幕

Question

我正在使用 Foundation 5 模态，并希望将中小屏幕中的模态调整为:

• 它填满了整个屏幕
• 当我在模式中向下滚动时，背景正文(原始页面)不会向下滚动。所以，一旦我到达模态的底部，它就会停止滚动。

我正在使用粉底的标记

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <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>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Answer 1

您可以使用 Chrome DevTools 并调整不同的样式来实现这一点。

为此你需要:

• 将宽度更改为 100% 并向其添加 !important
• 将高度更改为 100% 并向其添加 !important
• 将 top 设置为 0 并向其添加 !important

祝你好运。