Foundation-sites: 显示模态定位？

你有一个链接，所以我们可以帮助弄清楚发生了什么？

让我在您可以查看的位置启动并运行它，然后我会向您发送包含登录详细信息的消息。

好的，我私信发给你详情。

我认为您在 css .column, .columns {position: relative;} 中设置了规则

显示模式是绝对定位的。 我不知道为什么它没有定位固定。 可能启用滚动？

因此，绝对定位的模态将自己与它的第一个定位的父级（ class="eight columns" ）对齐。 您可以尝试添加这样的 css ......

.reveal-modal { 位置：固定；)

看看它是否如你所愿

好的。 这是来自 Foundation 的 grid.css 的第 17 行。

好的。 我无法读取您的文件名。 我只是一个用户 - 不是 zurb 开发者。 您可以尝试固定的东西或取消嵌套您的模态 div 并将其放在 html 的底部。

实际上，我为模态切换到 ColorBox 并且只是想报告错误（如果它是错误而不是我的错误）。 感谢您帮助定位问题！ 我花了几个小时来处理它，但找不到问题所在。

老实说，我无法了解这次会议的幕后工作:) Reveal 中是否存在错误，或者是否与其他风格发生冲突？

问题是，如果您在列中放置一个显示模式，则显示模式会与该列对齐，而不是与浏览器窗口对齐。 我不知道这是否是您可以解决的问题。

似乎您可以将reveal-modal 设置为position:fixed作为默认值，但我不知道您是否有理由反对它。

哦，明白了。 是的，Reveal 模式被设计为放置在页面的末尾，而不是在布局内——我们使用绝对而不是固定，这样你就可以保持页面滚动（如果你愿意的话）。 不过，将其更改为position:fixed将修复它。

那么最好在文档中提及这一点。

2011 年 11 月 30 日下午7 :14，Jonathan

哦，明白了。 是的，Reveal 模式被设计为放置在页面的末尾，而不是在布局内——我们使用绝对而不是固定，这样你就可以保持页面滚动（如果你愿意的话）。 不过，将其更改为position:fixed将适合它。

---

直接回复此邮件或在 GitHub 上查看：
https://github.com/zurb/foundation/issues/129#issuecomment -2968907

@smileyj68知道位置是什么：relative 在 grid.css 中的 .column、.columns 上做什么？ 位置：在响应式网站上工作时，固定在显示模式上并不是一个很好的选择，因为您确实需要滚动它。 我将尝试在本地覆盖它，并测试它是否破坏了任何东西。 但是，如果您有任何见解，我很乐意听到。

这个问题也困扰着我。 希望被记录下来......

而我，这篇评论做得很好。 它确实在文档中说把它放在所有东西之后，但是当它与 Wordpress 一起使用时，这意味着在页脚中。 如果它说为什么要这样做，那会很方便。

我也是。 将其设置为位置后：固定； 和溢出：滚动； 事情进展顺利。

有什么解决办法吗？！ 如果您的模态很大，则设置位置固定不是一个好主意。 如果有人找到任何解决方案，请写在这里。 谢谢！

我仍然有这个问题:(！任何解决方案？PLZ

将位置设置为固定不起作用

我设法让它工作。 当我打开foundation.css和foundation.min.css并更改两个文件中.reveal-modal类的定位时，从绝对定位切换到固定工作，如下所示：

-绝对到固定
-顶部：50px到 30%（你可以改变这个，我需要改变它才能让它下降到足以看到）

如果您将 Foundation 用于静态 HTML 以外的用途，这绝对是一个问题。 我的 Shopify 基础主题框架也存在产品图像模态弹出窗口的问题。 使用 .reveal-modal { position:fixed;overflow :scroll} 肯定有帮助。 但不是真正的解决方案。 在这种情况下，“显示”可能非常丑陋且不切实际。 据我所知，再多的纯 CSS 也无法解决这个问题。

您遇到的问题是 Reveal 模态受以前版本中定位父项的影响，因此您实际上应该只将 Reveal 模态作为 body 元素的直接子级。

你不应该在 4.3.2 版本中看到这个问题，因为它确保模态被移动到body的直接子级，而模态是可见的，这减轻了你的 CSS 导致的任何奇怪的定位问题.

如果您在 4.3.2 中看到这一点，请打开带有示例的票证，因为我进行了特定更改以确保其正常工作。

我同意这个“显示模式被设计为放置在页面的末尾，而不是在布局内”应该放在文档中，因为新手可能会因为这个遗漏而生气。 在我看到@smileyj68的评论之前，我不得不搜索整个网络谢谢

@chimdi2000从 4.3.2 开始，这不再是一个问题，因为如果您没有将它放在正确的位置，javascript 会为您移动它，所以我认为任何进一步的文档都是不必要的。

感谢@seantimm 的提醒。 我想我最好对 Shopify Foundation 4 主题框架进行一些更新！

@seantimm 4.3.2 修复了我的定位问题，但由于表单元素在显示内并被移到表单外，因此无法再提交。

作为自定义修复，我为 appendElement 添加了一个设置，允许将它们添加到文档中的特定位置。 有机会在未来的版本中添加这个吗？

我意识到这是一个旧线程，但截至 2014 年 12 月，我仍然遇到这个问题。 当然，这是一个足够简单的修复，但使用这样的框架的目的是让我们不必花时间在基本的事情上，而可以将时间集中在其他地方。

有没有计划在未来的版本中充实这一点？ 选择模态是固定位置还是绝对位置的能力似乎是一个很棒的功能。 似乎可以用一些 sass 变量来完成。

@smileyj68 ，你能解释一下为什么在显示打开时让页面继续能够滚动是可取的吗？ 在我看来，当模态打开时，页面内容将被阻止。 固定它并设置溢出属性以便模态滚动不是更好吗？ 如果这是默认设置，则不需要将其放置在页面末尾，这对于许多 CMS 情况来说是一个困难。

此外，我不得不在我所有的项目中将reveal-bg 位置从绝对位置更改为固定位置。 我不明白为什么这会被设置为绝对的。

我今天早上遇到了类似的问题（使用基础导轨 5.4.5）并通过将以下内容添加到.reveal-modal来修复它并将其放在页面中心来解决它：

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}