Как использовать Zurb Foundation с открытыми, открытыми, закрытыми, закрытыми функциями обратного вызова?

На веб-сайте zurb на веб-сайте http://foundation.zurb.com/docs/reveal.php в них перечислены некоторые параметры, включая

open: функция обратного вызова, которая запускает "до того, как модальный файл открывается".

открыт: функция обратного вызова, которая запускает "после" модального файла.

close: функция обратного вызова, которая запускает до того, как модальный готовится закрыть.

closed: функция обратного вызова, которая запускает "после" модального закрытия.

Но я понятия не имею, как использовать их с моим модальным. Itried

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

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

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

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

У меня есть googled, но не найдено никаких хитов. Кто может объяснить это или дать мне пример или предоставить ссылку?

Спасибо! Он работает!

У меня есть еще один близкий вопрос для open()

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

Я попытался добавить один атрибут, например data-closeOnBackgroundClick="false". Кажется, что это не работает. Какой должен быть правильный синтаксис? Будет ли он работать и для функции обратного вызова?

Ответы

Ответ 1

Вызовите reveal, как обычно, но включите имя опции и соответствующую функцию в качестве объекта:

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

Ответ 2

Этот ответ мне не помог. Вот что сработало (Foundation 4 и jQuery):

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

Ответ 3

Связывание событий для раскрытия базы 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...
});

Ответ 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');
});
```

Ответ 5

Как сказал meatrobot, чтобы получить эту работу, вы хотите привязываться к модальному с действием, которое вы нацеливаете. Я получил это для работы:

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

Ответ 6

Это немного поздно, но для второй части вы добавляете атрибуты в виде списка значений, разделенных запятой, в атрибуте параметров данных (проверяется с помощью основы 5), то есть:

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

И нет, вы не можете передавать функции таким образом, я пробовал:)

Ответ 7

Посмотрев на Foundation 5 и обнаружив, что библиотека рассылки запускает открытые, открытые, закрытые и закрытые события. Просто прикрепите обработчик к желаемому событию.

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

Вы также можете передать обработчики через аргумент настроек. Проверьте это: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

Ответ 8

Документация Foundation 5 определяет область видимости событий события в раскрывающемся пространстве событий. Тем не менее, фактические модальные события, похоже, не срабатывают последовательно в этом пространстве событий. Удаление этой спецификации устраняет проблему:

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

Ответ 9

В фундаменте 3.2.5 вы должны привязать 'open: open' следующим образом:

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

С уважением, MarianoC.