Foundation 6 在 HTML 文档底部显示模态渲染
Foundation 6 Reveal Modal Renders at Bottom of HTML Document
我注意到,每当我创建 Foundation 6 Reveal Modal 时,实际的 HTML 都会放置在文档的 bottom/end 中,而不管实际的显示模式在我的 HTML代码。
虽然这在大多数情况下都很好,但我 运行 遇到了一种边缘情况,我需要将表单部分放置在模态中。问题是当 Foundation Javascript 将模式移动到 HTML 文档的末尾时,模态框被放置在 form_tag 之外。我已经能够解决它,但它使我的代码比需要的复杂得多。
是否有任何简单的修复方法可以更改 HTML 文档中放置基础模态的位置?模态框放在 HTML 文档的末尾有什么特别的原因吗?不幸的是,我在文档、基金会论坛或 SO 上找不到任何东西。
示例伪代码:
<div id="first-div">
<div class="reveal" id="modal" data-reveal></div>
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
浏览器中的输出是:
<div id="first-div">
<!-- this is empty now -->
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
<!-- reveal modal is moved to end of HTML document -->
<div class="reveal-overlay">
<div class="reveal" id="modal" data-reveal></div>
</div>
编辑:
附上一个 Codepen,指出输出问题。模态按预期打开和关闭,但在检查输出时 HTML 显示模态被移动到 HTML 文档的末尾 - 它实际上位于底部标签的下方。
您需要指定您的模式需要弹出的位置。我 fork 你的 codepen
$('#first-div').foundation('reveal', 'open');
https://codepen.io/titse/pen/ayygrW
如果您需要更多帮助,请告诉我
这适用于 Foundation 6:
您需要覆盖 Reveal 的基金会默认 appendTo
变量。可以通过以下方式完成:
- 在 Reveal div 上添加
data-append-to="div#first-div"
标签以指定 Reveal 模态的父元素,如果适用,覆盖 div。这允许您为每个 Reveal 模态更改 dividually 中的父元素。
资料来源:Foundation Documentation
- 在使用
Foundation.Reveal.defaults.appendTo = "div#first-div"
初始化 Foundation 时,通过指定覆盖默认值来全局更改 Reveal 模块的默认值
资料来源:Foundation Docs
在我的测试中,将 body
元素内的父级设置为较小的 div
不会对模态框的定位或背景叠加层的显示产生不利影响。
在调用中指定父级(例如 $('#myDiv').foundation('reveal','open);
在当前版本的 Foundation 中不起作用。
我注意到,每当我创建 Foundation 6 Reveal Modal 时,实际的 HTML 都会放置在文档的 bottom/end 中,而不管实际的显示模式在我的 HTML代码。
虽然这在大多数情况下都很好,但我 运行 遇到了一种边缘情况,我需要将表单部分放置在模态中。问题是当 Foundation Javascript 将模式移动到 HTML 文档的末尾时,模态框被放置在 form_tag 之外。我已经能够解决它,但它使我的代码比需要的复杂得多。
是否有任何简单的修复方法可以更改 HTML 文档中放置基础模态的位置?模态框放在 HTML 文档的末尾有什么特别的原因吗?不幸的是,我在文档、基金会论坛或 SO 上找不到任何东西。
示例伪代码:
<div id="first-div">
<div class="reveal" id="modal" data-reveal></div>
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
浏览器中的输出是:
<div id="first-div">
<!-- this is empty now -->
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
<!-- reveal modal is moved to end of HTML document -->
<div class="reveal-overlay">
<div class="reveal" id="modal" data-reveal></div>
</div>
编辑: 附上一个 Codepen,指出输出问题。模态按预期打开和关闭,但在检查输出时 HTML 显示模态被移动到 HTML 文档的末尾 - 它实际上位于底部标签的下方。
您需要指定您的模式需要弹出的位置。我 fork 你的 codepen
$('#first-div').foundation('reveal', 'open');
https://codepen.io/titse/pen/ayygrW
如果您需要更多帮助,请告诉我
这适用于 Foundation 6:
您需要覆盖 Reveal 的基金会默认 appendTo
变量。可以通过以下方式完成:
- 在 Reveal div 上添加
data-append-to="div#first-div"
标签以指定 Reveal 模态的父元素,如果适用,覆盖 div。这允许您为每个 Reveal 模态更改 dividually 中的父元素。 资料来源:Foundation Documentation - 在使用
Foundation.Reveal.defaults.appendTo = "div#first-div"
初始化 Foundation 时,通过指定覆盖默认值来全局更改 Reveal 模块的默认值 资料来源:Foundation Docs
在我的测试中,将 body
元素内的父级设置为较小的 div
不会对模态框的定位或背景叠加层的显示产生不利影响。
在调用中指定父级(例如 $('#myDiv').foundation('reveal','open);
在当前版本的 Foundation 中不起作用。