如何让Foundation 5 Reveal Popup响应？

Question

我正在使用Foundation的最新版本Foundation 5，我想在我的项目中使用Reveal Popup，我尝试使用以下代码和.js文件来实现。

它在笔记本电脑和平板电脑等大型显示器上运行良好，但当我尝试在移动设备等小型设备上打开我的页面时，它显示不正常我必须在我的手机屏幕上左右移动才能看到整个弹出窗口。

• 包含的CSS

  <link href="../../Content/foundation/css/foundation.css" rel="stylesheet" type="text/css" /> <link href="../../Content/foundation/css/normalize.css" rel="stylesheet" type="text/css" />

• HTML部分

如果我错过了上述代码中的任何内容，请帮助我或建议我。

• 图片2

Answer 1

使用基础的内置网格类large-10 small-10 medium-10

<div id="myModal" class="reveal-modal large-10 small-10 medium-10 columns" data-reveal>
  <h2>Popup title.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

你必须删除这行css：

.reveal-modal {
  width: 100vw; //remove this line from your css
}

Answer 2

在_reveal.scss编辑@media #{$small-only}部分。

添加第width: 90vw;行

完成后应该如下所示：

@media #{$small-only} {
  min-height:100vh;
  width: 90vw;
}

如果您不希望模式垂直填充移动设备上的屏幕，也可以删除行min-height:100vh;。

此解决方案不需要使用网格列。

Answer 3

其他答案会起作用。这实际上是由于基础不再应用box-sizing：border-box到所有元素。它将填充物添加到整体显示100％宽度，将其推到身体外。

.reveal-modal {
    box-sizing:border-box;
    min-height:0 /* If you want to remove the full viewport height effect */
}