Foundation 6 在 HTML 文档底部显示模态渲染 [英] Foundation 6 Reveal Modal Renders at Bottom of HTML Document

问题描述

我注意到，每当我创建 Foundation 6 Reveal Modal 时，实际的 HTML 都会放置在文档的底部/末尾，而不管实际的显示模式放置在我的 HTML 代码中的哪个位置.

虽然这在大多数情况下都很好，但我遇到了一个边缘情况，我需要在模态内放置一个表单部分.问题是模态被放置在 form_tag 之外，因为 Foundation Javascript 将其移动到 HTML 文档的末尾.我已经能够解决它，但它使我的代码比它需要的复杂得多.

是否有任何简单的修复方法可以更改基础模式在 HTML 文档中的放置位置?将模态放在 HTML 文档的末尾是否有任何特殊原因?不幸的是，我在文档、基金会论坛或 SO 上找不到任何内容.

<小时>

示例伪代码:

<div class="reveal" id="modal" data-reveal></div>
<div id="第二个 div"><p>这里有些东西</p>

浏览器输出为:

<!-- 现在是空的-->
<div id="第二个 div"><p>这里有些东西</p>

<!-- 显示模态移动到 HTML 文档的末尾--><div class="reveal-overlay"><div class="reveal" id="modal" data-reveal></div>

附上一个 Codepen，指出输出问题.模态在执行时打开和关闭，但是在检查输出 HTML 时，显示模态被移动到 HTML 文档的末尾 - 它实际上在底部的标签下方.

https://codepen.io/matt_hen/pen/RZZBQM

解决方案

您需要指定模态需要弹出的位置.我分叉了你的代码笔

$('#first-div').foundation('reveal', 'open');

https://codepen.io/titse/pen/ayygrW

如果您需要更多帮助，请告诉我

I've noted that whenever I create a Foundation 6 Reveal Modal the actual HTML is placed at the bottom/end of the document regardless of where the actual reveal modal is placed in my HTML code.

Although this is fine most of the time I've ran into an edge case where I need to place a form partial inside a modal. The issue is that the modal is placed outside the form_tag as the Foundation Javascript moves it to the end of the HTML document. I've been able to work around it but it makes my code much more complicated than it needs to be.

Is there any easy fix to change where the foundation modal is placed in the HTML document? Is there any particular reason that modals are placed at the end of the HTML document? Unfortunately I could not find anything on the docs, Foundation forums or SO.

---

Example psuedocode:

<div id="first-div">
  <div class="reveal" id="modal" data-reveal></div>
</div>

<div id="second-div">
  <p>Some stuff here</p>
</div>

Output in browser is:

<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>

Edit: Attached a Codepen noting the output issue. The modal opens and closes as exected but when inspecting the output HTML the reveal modal is moved to the end of the HTML document - it's actually below the tags at the bottom.

https://codepen.io/matt_hen/pen/RZZBQM

解决方案

You need to specify where your modal needs to pop up. I forked your codepen

$('#first-div').foundation('reveal', 'open');

https://codepen.io/titse/pen/ayygrW

Let me know if you need more help

这篇关于Foundation 6 在 HTML 文档底部显示模态渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！