web-dev-qa-db-fra.com

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

Sur le site Web de la fondation zurb à http://foundation.zurb.com/docs/reveal.php ils ont énuméré quelques options, y compris

open: fonction de rappel qui déclenche "avant" l'ouverture du modal.

ouvert: fonction de rappel qui déclenche "après" l'ouverture du modal.

close: fonction de rappel qui déclenche "avant" que le modal se prépare à fermer.

closed: fonction de rappel qui se déclenche "après" la fermeture du modal.

Mais je n'ai aucune idée de comment les utiliser avec mon modal. J'ai essayé

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

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

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

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

J'ai googlé mais je n'ai trouvé aucun résultat. Quelqu'un qui peut l'expliquer ou me donner un exemple ou fournir un lien connexe?

Je vous remercie! Ça marche!

J'ai encore une autre question étroitement liée à révéler ()

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

J'ai essayé d'ajouter un attribut comme data-closeOnBackgroundClick="false" Cela ne semble pas fonctionner. Quelle devrait être la syntaxe correcte? Cela fonctionnera-t-il également pour la fonction de rappel?

eventsjavascript-eventscallbackmodal-dialogzurb-foundation
34
user1882562

Appelez reveal comme vous le feriez normalement, mais incluez le nom de l'option et la fonction correspondante en tant qu'objet:

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

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

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

Liaisons d'événement pour Zurb Foundation Reveal -

Il existe une série d'événements auxquels vous pouvez vous lier pour déclencher des 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 révélations de données utilisées sur une seule page, comme suit:

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

Ensuite, dans ces situations, vous pouvez déclencher le rappel comme expliqué ci-dessus mais avec peu de modifications comme indiqué 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...
});
19
Kedar.Aitawdekar

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

  • closeme.zf.reveal Se déclenche immédiatement avant l'ouverture du modal. Ferme tous les autres modaux actuellement ouverts
  • open.zf.reveal Se déclenche lorsque le modal s'est ouvert avec succès.
  • closed.zf.reveal Se déclenche lorsque la fermeture du modal est terminée.

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

Exemples:

  • Rappel générique qui se déclenchera pour tous les modaux:

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

  • Rappel qui se déclenche lorsqu'un modal spécifique est ouvert:

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

Comme l'a dit meatrobot, pour que cela fonctionne, vous voulez vous lier au modal avec l'action que vous visez. Je l'ai fait fonctionner:

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

C'est un peu tard mais pour la deuxième partie, vous ajoutez les attributs en tant que liste de valeurs séparées par des points-virgules dans l'attribut data-options (testé avec la fondation 5), à savoir:

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

Et non, vous ne pouvez pas passer de fonctions de cette façon, j'ai essayé :)

2
James Lock

La documentation de Foundation 5 spécifie la portée des événements de révélation dans l'espace d'événements "Révélation". Cependant, les événements modaux réels ne semblent pas se déclencher de manière cohérente dans cet espace d'événements. La suppression de cette spécification résout le problème:

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

En regardant Foundation 5 et constaté que la bibliothèque de révélations déclenche des événements d'ouverture, d'ouverture, de fermeture et de fermeture. Attachez simplement un gestionnaire à l'événement souhaité.

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

Vous pouvez également transmettre les gestionnaires via l'argument paramètres. Vérifiez ceci: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

1
djtek

Dans la fondation 3.2.5, vous devez lier "révéler: ouvert" comme ceci:

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

Cordialement, MarianoC.

0
MarianoC