events - vocales - ¿Cómo se usa la Fundación Zurb revela con funciones de devolución de llamada abiertas, abiertas, cerradas y cerradas?

vocales abiertas y cerradas ejemplos

Question

En el sitio web de la fundación zurb en http://foundation.zurb.com/docs/reveal.php , enumeraron algunas opciones, incluidas

abrir: función de devolución de llamada que activa ''antes'' de que se abra el modal.

abierto: función de devolución de llamada que desencadena ''después'' de que se abra el modal.

cerrar: función de devolución de llamada que desencadena ''antes'' de que el modal se prepare para cerrar.

cerrado: función de devolución de llamada que desencadena ''después'' de que el modal está cerrado.

Pero no tengo idea de cómo usarlos con mi modal. Lo intenté

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

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

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

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

Busqué en Google pero no encontré hits. ¿Alguien que pueda explicarlo o darme un ejemplo o proporcionar un enlace relacionado?

¡Gracias! ¡Funciona!

Tengo otra pregunta estrechamente relacionada para revelar ()

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

Traté de agregar un atributo como data-closeOnBackgroundClick="false" Eso parece no funcionar. ¿Cuál debería ser la sintaxis correcta? ¿Funcionará también para la función de devolución de llamada?

Answer 1

Al igual que meatrobot, dijo, para que esto funcione, debes vincularlo al modal con la acción que estás apuntando. Tengo esto para trabajar:

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

Answer 2

En Foundation 3.2.5 deberías unir ''reveal: opened'' como este:

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

Saludos, MarianoC.

Answer 3

En Zurb Foundation v6, estos eventos se renombraron a xxx.zf.reveal :

• closeme.zf.reveal Se activa inmediatamente antes de que se abra el modal. Cierra otros modales que actualmente están abiertos
• open.zf.reveal Se activa cuando el modal se ha abierto correctamente.
• closed.zf.reveal Se activa cuando el modal finaliza.

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

Ejemplos:

• Devolución de llamada genérica que se activará para todos los modales:

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

• Devolución de llamada que se activará cuando se abra un modal específico:

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

Answer 4

Esto es un poco tarde, pero para la segunda parte agrega los atributos como una lista de valores separados por punto y coma en el atributo de opciones de datos (probado con base 5), es decir:

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

Y no, no puedes pasar funciones de esta manera, lo intenté :)

Answer 5

La documentación de la base 5 especifica el alcance de los eventos de revelación en el espacio de eventos ''revelar''. Sin embargo, los eventos modales reales no parecen disparar consistentemente dentro de este espacio de eventos. Eliminar esta especificación soluciona el problema:

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

Answer 6

La llamada se reveal como lo haría normalmente, pero incluye el nombre de la opción y la función correspondiente como un objeto:

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

Answer 7

La respuesta anterior no funcionó para mí. Esto es lo que funcionó (Foundation 4 y jQuery):

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

Answer 8

Observando Foundation 5 y descubrió que la biblioteca revela los eventos abiertos, abiertos, cerrados y cerrados. Simplemente adjunte un controlador al evento que desee.

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

También puede pasar los controladores a través del argumento de configuración. Mira esto: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

Answer 9

Vinculaciones de eventos para Zurb Foundation Reveal -

Hay una serie de eventos a los que puede vincularse para activar devoluciones de llamada:

$(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 tiene varios datos revelados utilizados en una sola página de la siguiente manera:

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

Luego, en estas situaciones, puede activar la devolución de llamada de la misma manera que se explicó anteriormente, pero con pequeñas modificaciones, como se muestra a continuación:

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