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

на сайте zurb фонд в http://foundation.zurb.com/docs/reveal.php они перечислили некоторые варианты, в том числе

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

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

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

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

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

$('#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" это, похоже, не работает. Каким должен быть правильный синтаксис? Будет ли он работать и для функции обратного вызова?

34
callback events javascript-events modal-dialog zurb-foundation

9 ответов

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

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

приведенный выше ответ не сработал для меня. Вот что сработало (Foundation 4 и jQuery):

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

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

на Zurb Foundation v6 эти события были переименованы в xxx.zf.reveal:

  • closeme.ЗФ.открой срабатывает непосредственно перед открытием модального. Закрывает любые другие модалы, которые в настоящее время открыты
  • открыть.ЗФ.открой срабатывает, когда модальный успешно открыт.
  • закрытые.ЗФ.открой срабатывает при закрытии модального.

источник: 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');
});
7

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

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

это немного поздно, но для второй части вы добавляете атрибуты в виде списка значений, разделенных точкой с запятой, в атрибуте data-options (проверено с foundation 5), i.e:

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

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

2

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

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

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

1

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

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

в foundation 3.2.5 вы должны связать "reveal: opened" следующим образом:

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

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

0