如何使用Zurb Foundation显示开放,打开,关闭,关闭的回调函数？

Question

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

open:在模态打开之前"触发"的回调函数.

打开:在打开模态后触发'的回调函数.

close:在模态准备关闭之前"触发"的回调函数.

closed:关闭模态后触发''的回调函数.

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

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

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

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

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

我用谷歌搜索,但没有发现.谁可以解释它或给我一个例子或提供相关链接？

谢谢!有用!

我还有另一个与揭密()相关的密切相关的问题

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

我试图添加一个像data-closeOnBackgroundClick="false"似乎无法工作的属性.什么应该是正确的语法？它也适用于回调函数吗？

Answer 1

上述答案对我不起作用.这是有用的(基础4和jQuery):

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

Answer 2

Zurb基金会的事件绑定揭示 -

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

$(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...
});

Answer 3

reveal像往常一样调用,但包括选项的名称和相应的函数作为对象:

//Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });

Answer 4

在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');
  });