在 Foundation 4 中显示模态答案

【问题标题】：Revealing a Modal in Foundation 4在 Foundation 4 中显示模态
【发布时间】：2014-09-21 06:35:25
【问题描述】：

如何在 Foundation 4 中以编程方式显示模式？

在 Foundation 3 中，我们有易于使用的reveal() 方法。

你可以在 Foundation 4 中使用什么？请帮忙。

【问题讨论】：

标签： zurb-foundation

【解决方案1】：

我很确定您可以简单地使用 .foundation 方法在您的模态上调用“打开”。类似于：

$('#myModal').foundation('reveal', 'open');

e：刚刚检查了文档，是的，它就在那里：http://foundation.zurb.com/docs/components/reveal.html

寻找“您也可以通过 JavaScript 打开和关闭 Reveal：”

【讨论】：

我无法使用此方法关闭模式（通过单击关闭按钮或显示背景）。您可以通过处理按钮上的单击事件并调用 $('#myModal').foundation('reveal', 'close'); 来解决此问题
我无法使用 $('#myModal').foundation('reveal', 'close'); 关闭模式；
同样的问题-通过 $('#myModal').foundation('reveal', 'close');只是有时有效。

【解决方案2】：

不幸的是，在 Foundation 4 中，您必须拥有此触发链接才能打开模式 =/ 不幸的是，这不是因为您必须编写更多代码（那不是真的），而是因为这个实现不是，比方说，漂亮。

我的模态代码：

<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
    <div id="modalContent"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

JS函数打开并放入一些内容到modal中

function openModal(url,params,text){

// If @url is not empty then we change the #modalContent value with the @url value
if(url !== '')
{
    ajaxLoad('#modalContent',url,params);
}
// If @text is not empty then we change the #modalContent value with the @text value
else if(text !== '')
{
    $('#modalContent').html(text);
}

// If both @url and @text are empty, then the #modalContent remains unchanged. 
// Now we just show de modal with the changed (or not) content
$('a.reveal-link').trigger('click'); }

希望对你有帮助！

【讨论】：

【解决方案3】：

对于程序化 (javascript) 访问，docs 似乎只建议通过点击事件启动。

添加您的模态：

<div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

设置触发器：

<a href="#" data-reveal-id="myModal" id="my-trigger">Click Me For A Modal</a>

以编程方式激活触发器：

$('#my-trigger').trigger('click');

诚然，这似乎是一种变通方法，这可能是由于他们高度重视“轻量级/移动优先”。让我们看看下一个版本会带来什么。

【讨论】：

我尝试了上面的代码，但它不起作用。你能确认它对你有用吗？
我找到了一种解决方案——将a href 替换为
。然后它工作。这可能是一个错误吗？
以上对我来说很好，使用的是版本 4 的新版本（确保在警报插件上方包含 zepto.js 和foundation.js）。此外，您可以使用几乎任何您希望用于触发器的元素（div、span、a、p 等），只要您为其提供 data-reveal-id。

【解决方案4】：

$("#myModal").foundation('reveal', 'open');

【讨论】：