如何使用Zurb基金会揭示与打开，打开，关闭，关闭回调函数

Question

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

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

打开

：在模式打开后触发的回调函数。

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

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

但是我不知道如何在我的模态中使用它们。我试过了：

$('#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"这似乎不起作用。正确的语法应该是什么？它也适用于回调函数吗？

Answer 1

上面的答案对我不起作用。以下是有效的方法（Foundation 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');
  });
  

Answer 5

就像肉机器人说的那样，要让它工作，你需要通过你目标的动作绑定到模态。我让这个工作：

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

Answer 6

这有点晚了，但在第二部分，您将属性添加为数据选项属性中以分号分隔的值列表（使用 foundation 5 进行测试），即：

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

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

Answer 7

查看基础 5 并发现 reveal 库触发打开、打开、关闭和关闭事件。只需将处理程序附加到所需的事件即可。

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

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

Answer 8

Foundation 5 文档指定了将揭示事件的范围限定为"揭示"事件空间。 但是，实际的模态事件似乎并未在此事件空间中一致地触发。 删除此规范可解决此问题：

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

Answer 9

在 Foundation 3.2.5 中，你应该像这样绑定 'reveal：open'：

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

问候，马里亚诺·