如何解决您如何强制 Foundation Reveal 模式将 HTML 块保留在编写它的父 div 中?
当使用 Foundation 6 的 Reveal 模式时,javascript 会自动将 Reveal div
块放在紧靠关闭 body
标签之前,而不是它最初写入 DOM 的位置。我需要一种方法来保留我最初编写它的模态代码,或者至少指定它的父级。
这对我来说是个问题,因为我使用 AJAX 来呈现我的页面的一部分(在下面的示例中为 div#main
),但是我的模态框一直挂着,因为它们被移到了 {{1} 之外}.
我尝试通过指定父 div(参见 this question 上接受的答案)并使用 div
事件而不是 Foundations onclick
方法来打开模态。两者都对 div 的放置位置没有任何影响。
示例:
data-open
这是上述示例的 codepen。
解决方法
您需要为 Reveal 覆盖 Foundation 默认的 appendTo
变量。这可以通过以下方式完成:
- 向 Reveal div 添加
data-append-to="div#main"
以指定 Reveal 模态和覆盖 div(如果适用)的父元素。这允许您为每个 Reveal 模式单独更改父元素。资料来源:Foundation Documentation - 当您使用
Foundation.Reveal.defaults.appendTo = "div#main"
初始化 Foundation 时,通过指定覆盖默认值来全局更改 Reveal 模块的默认值:Foundation Docs
在我的测试中,在 div
元素内将父级设置为较小的 body
不会对模式的定位或背景叠加的显示产生不利影响。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。