0

我注意到，每当我创建 Foundation 6 Reveal Modal 时，实际的 HTML 都会放置在文档的底部/末尾，而不管实际的显示模式放在我的 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 文档的末尾 - 它实际上位于底部的标签下方。

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

4

2 回答 2

1

您需要指定模式需要弹出的位置。我分叉了你的密码笔

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

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

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

于 2017-08-13T17:03:48.540 回答
1

这适用于 Foundation 6：

您需要appendTo为 Reveal 覆盖 Foundation 默认变量。这可以通过以下方式完成：

  1. 在 Reveal div 上添加一个data-append-to="div#first-div"标签以指定 Reveal 模式的父元素，如果适用，还可以指定覆盖 div。这允许您为每个显示模式单独更改父元素。资料来源：基金会文档
  2. Foundation.Reveal.defaults.appendTo = "div#first-div" 通过在使用Source初始化 Foundation 时指定覆盖默认值来全局更改 Reveal 模块的默认值： Foundation Docs

在我的测试中，将父元素设置为较小div的元素内部body不会对模态框的定位或背景叠加层的显示产生不利影响。

在调用中指定父级（例如$('#myDiv').foundation('reveal','open);，在当前版本的 Foundation 中不起作用。

于 2021-02-03T21:30:50.270 回答