Comment utiliser Zurb Foundation reveal avec des fonctions de rappel ouvertes, ouvertes, fermées et fermées?

la réponse ci-dessus n'a pas fonctionné pour moi. Voici ce qui a fonctionné (Fondation 4 et jQuery):

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

Événement Liaisons pour Zurb Foundation Révèlent -

Il y a une série d'événements que vous pouvez lier à déclenchement rappels:

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

Si vous avez plusieurs données révèlent utilisés dans la seule page comme suit :

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

alors dans ces situations vous pouvez déclencher le rappel comme expliqué ci-dessus mais avec peu de modification comme montré ci-dessous :

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

sur Zurb Foundation v6, ces événements ont été renommés en xxx.zf.reveal:

• closeme.zf.révèlent se déclenche immédiatement avant l'ouverture du modal. Ferme tous les autres models qui sont actuellement ouverts
• ouvrir.zf.révèlent feux lorsque le modal s'est ouvert avec succès.
• fermé.zf.révèlent feux lorsque le modal est terminé fermeture.

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

Exemples:

• callback générique qui se déclenche pour toutes les modales:

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

• Rappel se déclenche quand un modal est ouvert:

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

comme meatrobot l'a dit, pour que cela fonctionne, vous voulez lier le modal avec l'action que vous ciblez. J'ai reçu ceci:

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

C'est un peu tard mais pour la deuxième partie vous ajoutez les attributs comme une liste de valeurs séparées par deux points dans l'attribut data-options (testé avec la fondation 5), I. e:

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

Et non, vous ne pouvez pas passer fonctionne de cette manière, j'ai essayé :)

en regardant la Fondation 5 et a constaté que la bibliothèque reveal déclenche des événements ouverts, ouverts, fermés et fermés. Il suffit d'attacher un handler à l'événement que vous voulez.

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

Vous pouvez également passer les gestionnaires via l'argument paramètres. Regardez ça: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

la documentation de la fondation 5 spécifie la portée des événements reveal à l'espace d'événements 'reveal'. Cependant, les événements modaux réels ne semblent pas se déclencher de façon uniforme dans cet espace d'événements. Suppression de cette spécification corrige le problème:

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

Dans la fondation 3.2.5 vous devez lier " dévoilent:ouvert comme ceci:

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

Salutations, MarianoC.