问题标签 [zurb-reveal]

我创建了以下 plunkr 来演示我当前的问题。（我知道 iframe 内容没有加载，但这不是问题。）我在单击按钮后在 javascript 中动态设置 iframe 源，我想在 iframe 内容加载之前显示一个加载指示器，但是当 iframe完成后，模态会从页面底部射出，而不是重新居中。

我试过 $('#exampleModal1').Foundation() 但被告知是 Foundation 5，reflow 标签现在也消失了。

我已经尝试过 Foundation.reInit($('#exampleModal1')) 它什么也不做，并且关闭按钮和 esc/click out 关闭模式不起作用。

http://plnkr.co/edit/QgkDSz0MdAcIHLJ10LVC?p=info

首先这是错误

我拥有的是一个 Thread 模型和控制器以及一个 Answer 模型和控制器。我想要做的是通过 zurb Reveal Modal 在线程的显示页面上编辑答案。

这就是我的代码的样子

线程模态

答案模型

应答控制器

显示线程

回答部分

回答编辑表格部分

当我尝试打开线程时出现错误#show

它说错误在这里

模板包含的痕迹：app/views/answers/_answer.html.erb、app/views/threads/show.html.erb

有什么建议么 ？错误可能在哪里？

我想将 dom 元素<a>链接附加到 jquery-ui.ui-autocomplete菜单。这行得通。

生成的链接必须根据原始<input reveal="XXX">attr传递的id参数打开一个foundation 6.2.3 modal（foundation reveal-modal）。

开启阶段不起作用：虽然 id 参数正确，但 js 控制台说"ReferenceError: We're sorry, 'open' is not an available method for this element."...

我怀疑基础显示没有加载到这个动态插入的 dom 链接元素中。我怎样才能把它弄出来？

我正在使用 Foundation6 显示编码弹出表单。我遇到的 JavaScript 问题可能与 jQuery.js / Foundation.js 事件绑定或处理有关。

当我单击显示窗口中的文本字段（或任何其他字段）时，该字段获得焦点，然后显示窗口迅速隐藏并再次显示，该字段失去焦点。显示窗口也会改变它在屏幕上的位置。访问文本字段的唯一方法是使用制表键。

索引.html：

modalform.html

应用程序.js：

在这里您可以测试行为（至少在我的浏览器 Firefox 和 Chrome 上）：[http][1] ://codepen.io/repeat_spacer/pen/bBRZKd 。从按钮打开显示弹出窗口并尝试更改任何文本字段的值。无法通过鼠标单击进入该字段。

希望有人能指出我的问题或如何继续追踪它。

更新：

我清理了 modalform.html 代码（有一些 ajax 显示加载新表单的东西，我有 ajax 加载下一个表单）。所以现在“加载下一个表单”功能不起作用，但另一方面“焦点丢失”行为消失了。

modalform_updated.html：

更新代码笔： http ://codepen.io/repeat_spacer/pen/MbrYvj

更新 2：

这就是为什么我在表单属性中有数据开放（Foundation Reveal open-attribute）的原因。当单击表单中的字段时，这似乎是触发 Foundation Open 事件的行为的原因。所以快速修复会以一些肮脏的方式过滤掉它。

这是我想要的具有多弹出功能的提琴手： http: //codepen.io/repeat_spacer/pen/JbMdPm（第一个弹出模式 ajax 在同一模式中加载下一个弹出内容）

我已经搜索和搜索，但只能找到关于这类事情的非常古老的帖子。我要做的是创建多个 Foundation 6 Reveal 模态，这些模态会打开将自动播放的 YouTube 视频，并在模态关闭时停止视频/音频。

这是一个基本的设置。任何帮助都会很棒！

密码笔

在下载页面上，它说 package essential（foundation-6.3.0-essential）包含 Reveal Modal 和 Abide 验证，但下载后发现它在 css 中不存在。

我正在尝试使用 Foundation 的显示模式。

我已经成功使用了一个基本的模态。由于我刚刚开始这个项目（使用 symfony2 和 Foundation），我遇到了一些困难。我不太了解 Foundation 是如何工作的。

所以我需要做的是：

几秒钟后（现在为 10 秒）打开显示模式，并带有淡入淡出动画，周围没有灰色背景。顺便说一句，淡入淡出功能仅在模态首次出现后发生，我不明白为什么会这样？

我试图搜索如何执行此操作，但没有找到有关此的主题（也许我只是不擅长搜索）。

感谢您的任何回答！:D

PS：抱歉语法错误，不是我的母语。

对于任何精度，只要问！这是我正在使用的模式的副本：

我有一个带有单个 Foundation 6 Reveal 模式的登录页面。模式包含页面的联系表。因此，该模式可以由出现在页面不同位置的几个按钮触发。所有按钮都应打开相同的“联系表格”模式。

单击任何按钮确实可以毫无问题地打开模式。但是，当我们关闭模态框时——无论是通过单击模态框内的“关闭”按钮，还是通过按键盘上的“Esc”键——页面会自动滚动到页面上最后一个按钮的位置，该按钮是触发模态的。似乎在“关闭”时，模式会强制视口滚动到 DOM 中的最后一个触发器！

显然，这是不受欢迎的行为 - 因为大多数时候访问者不会通过单击最后一个按钮来打开模式......

此 CodePen 说明了此问题： https ://codepen.io/icouto/pen/QgJzoJ

代码摘要：

如果您单击顶部按钮打开模态，然后关闭模态，您将自动被带到页面底部...

我在做一些明显错误的事情吗？有什么我错过的吗？是否有一种解决方法，不涉及在每个触发器旁边放置多个模态副本？

任何指导表示赞赏！

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

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

是否有任何简单的修复方法可以更改基础模式在 HTML 文档中的放置位置？将模态框放在 HTML 文档的末尾有什么特别的原因吗？不幸的是，我在文档、基金会论坛或 SO 上找不到任何东西。

示例伪代码：

浏览器中的输出为：

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

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

我正在尝试为每个“编辑”按钮显示一个模式，就在我单击“编辑”按钮时，它没有打开，我按照 Foundation 6 的文档中提到的那样做。这是我的代码。请提供任何帮助。

我给每个显示模式一个基于字段 id 的 id，我将有不同的 id 并将每个编辑按钮与其模式链接

编辑模式的形式

名字输入字段

姓氏输入栏

表单的提交按钮

模态的关闭按钮