Javascript 如何在打开、打开、关闭、关闭回调函数中使用 Zurb Foundation 显示？

How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

提问by user1882562

On zurb foundation's website at http://foundation.zurb.com/docs/reveal.phpthey listed some Options including

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

open: callback function that triggers 'before' the modal opens.

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

opened: callback function that triggers 'after' the modal is opened.

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

close: callback function that triggers 'before' the modal prepares to close.

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

closed: callback function that triggers 'after' the modal is closed.

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

But I have no idea how to use them with my modal. I tried:

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

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

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

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

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

I have Googled but found no hits. Anyone who can explain it or give me an example or provide a related link?

我用谷歌搜索但没有找到任何命中。谁能解释一下或给我一个例子或提供相关链接？

The suggestion given works, however I have yet another closely related question for reveal():

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

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

I tried to add one attribute like data-closeOnBackgroundClick="false"That doesn't seem to work. What should be the correct syntax? Will it work for callback function as well?

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

采纳答案by chrisjsherm

Call reveallike you normally would, but include the name of the option and corresponding function as an object:

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

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

回答by meatrobot

The above answer did not work for me. Here's what worked (Foundation 4 and jQuery):

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

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

回答by Kedar.Aitawdekar

Event Bindings for Zurb Foundation Reveal -

Zurb Foundation 的事件绑定揭示 -

There are a series of events that you can bind to for triggering callbacks:

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

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

If you have multiple data-reveal used in single page as follows :

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

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

Then in this situations you can trigger callback same as explained above but with little modification as shown below :

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

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

回答by sequielo

On Zurb Foundation v6, these events were renamed to xxx.zf.reveal:

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

• closeme.zf.revealFires immediately before the modal opens. Closes any other modals that are currently open
• open.zf.revealFires when the modal has successfully opened.
• closed.zf.revealFires when the modal is done closing.

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

Source: http://foundation.zurb.com/sites/docs/reveal.html#js-events

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

Examples:

例子：

• Generic callback that will fire for all modals:

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

• Callback that will fire when a specific modal is opened:

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

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

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

回答by Chris Roane

Like meatrobot said, to get this working you want to bind to the modal with the action you are targetting. I got this to work:

就像肉机器人说的那样，要使其正常工作，您需要将目标操作绑定到模态。我得到了这个工作：

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

回答by James Lock

This is a little late but for the second part you add the attributes as a semi-colon separated list of values in the data-options attribute (tested with foundation 5), i.e:

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

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

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

And no, you cannot pass functions this way, i tried :)

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

回答by djtek

Looking at Foundation 5 and found that the reveal library triggers open, opened, close, and closed events. Just attach a handler to the event you want.

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

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

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

You can also pass the handlers via the settings argument. Check this out: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

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

回答by Brian Peacock

The foundation 5 documentation specifies scoping of reveal events to the 'reveal' eventspace. However, the actual modal events do not seem to fire consistently within this eventspace. Removing this specification fixes the issue:

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

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

回答by MarianoC

In foundation 3.2.5 you should bind 'reveal:opened' like this:

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

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

Regards, MarianoC.

问候，马里亚诺C。