javascript - 如何使 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
}