37

在 zurb 基金会的网站http://foundation.zurb.com/docs/reveal.php他们列出了一些选项，包括

open：在模式打开之前触发的回调函数。

已打开：在模式打开“之后”触发的回调函数。

关闭：触发“在”模式准备关闭之前的回调函数。

关闭：在模式关闭后触发的回调函数。

但我不知道如何将它们与我的模态一起使用。我试过：

$('#myModal').closed(function()
{});

$('#myModal').trigger('reveal:closed')(
{});

$('#myModal').reveal.closed(function()
{});

$('#myModal').reveal().closed(function()
{});

我用谷歌搜索但没有找到任何结果。任何人都可以解释它或给我一个例子或提供相关链接？

给出的建议有效，但是我还有另一个密切相关的问题reveal()：

<a href="#" class="button" data-reveal-id="myModal2">Click Me For A Modal</a>);

我试图添加一个属性，例如data-closeOnBackgroundClick="false"That 似乎不起作用。正确的语法应该是什么？它也适用于回调函数吗？

4

9 回答 9

41

上面的答案对我不起作用。这是有效的（Foundation 4 和 jQuery）：

$('#myModal').bind('opened', function() {
  console.log("myModal opened");
});
于 2013-05-20T20:54:51.740 回答
21

Zurb Foundation Reveal 的事件绑定 -

您可以绑定一系列事件来触发回调：

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

如果您在单页中使用了多个数据显示，如下所示：

<div class="content reveal-modal" id="element-1" data-reveal>
<div class="content reveal-modal" id="element-2" data-reveal>

然后在这种情况下，您可以触发与上述相同的回调，但只需稍作修改，如下所示：

$(document).on('open.fndtn.reveal', '#element-1[data-reveal]', function () {
  // your code goes here...
});

$(document).on('open.fndtn.reveal', '#element-2[data-reveal]', function () {
  // your code goes here...
});
于 2014-04-11T10:55:33.163 回答
16

像往常一样调用reveal，但将选项的名称和相应的函数作为对象包含在内：

//Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });
于 2012-12-07T15:40:33.933 回答
14

在 Zurb Foundation v6 上，这些事件被重命名为xxx.zf.reveal：

  • closeme.zf.reveal 在模态打开之前立即触发。关闭当前打开的任何其他模式
  • open.zf.reveal 当模式成功打开时触发。
  • closed.zf.reveal 当模式完成关闭时触发。

来源： http: //foundation.zurb.com/sites/docs/reveal.html#js-events

例子：

  • 将为所有模式触发的通用回调：

    $(document).on('open.zf.reveal', '[data-reveal]', function() {
  console.log('This works');
});

  • 打开特定模式时将触发的回调：

    $(document).on('open.zf.reveal', '#<ELEMENT-ID>[data-reveal]', function() {
  console.log('This works');
});
于 2016-08-19T00:17:38.270 回答
4

就像肉机器人说的那样，要让这个工作你想用你所针对的动作绑定到模态。我得到了这个工作：

$('#myModal').bind('closed', function() {
    console.log("myModal closed!");
});
于 2013-09-17T13:34:31.973 回答
2

这有点晚了，但是对于第二部分，您将属性添加为 data-options 属性中的分号分隔的值列表（使用基础 5 测试），即：

<div id="myModal" data-options="close_on_background_click:false;" class="reveal-modal">

不，你不能以这种方式传递函数，我试过:)

于 2014-02-15T10:47:51.253 回答
1

查看Foundation 5，发现reveal library会触发open、open、close、close事件。只需将处理程序附加到您想要的事件。

$('#myModal').on([event], handler)

您还可以通过设置参数传递处理程序。看看这个：https ://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

于 2014-03-08T18:57:02.760 回答
1

Foundation 5 文档指定了揭示事件到“揭示”事件空间的范围。然而，实际的模态事件似乎并没有在这个事件空间内持续触发。删除此规范可解决问题：

$(document).on('opened.fndtn', '[data-reveal]', function() {
  console.log('This works');
});
于 2016-04-26T13:35:32.430 回答
0

在基础 3.2.5 中，您应该像这样绑定 'reveal:opened'：

$('#myModal').bind('reveal:opened', function() {
   console.log("myModal opened");
});

问候， MarianoC。

于 2015-07-06T21:28:30.717 回答