如何在Foundation 4中以编程方式显示模式?
在Foundation 3中,我们使用了易于使用的reveal()方法。
你可以在基金会4中使用什么?请帮忙。
答案 0 :(得分:4)
我很确定你可以简单地在你的模态上使用.foundation方法来调用'open'。就像这样:
$('#myModal').foundation('reveal', 'open');
e:刚刚检查了文档和是的,它就在那里:http://foundation.zurb.com/docs/components/reveal.html
寻找“你也可以通过JavaScript打开和关闭Reveal:”
答案 1 :(得分: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">×</a>
</div>
JS函数打开并将一些内容放入模态
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'); }
希望它有所帮助!
答案 2 :(得分:0)
对于程序化(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">×</a>
</div>
设置触发器:
<a href="#" data-reveal-id="myModal" id="my-trigger">Click Me For A Modal</a>
以编程方式激活触发器:
$('#my-trigger').trigger('click');
不可否认,这似乎是一种解决方案,也许这是因为他们提高了“轻量级/移动优先”的重点。让我们看看下一个版本带来了什么。
答案 3 :(得分:0)
$("#myModal").foundation('reveal', 'open');