/ / Revelando un Modal en Foundation 4 - zurb-foundation

Revelando un Modal en Foundation 4 - zurb-foundation

¿Cómo se revela un modal programáticamente en Foundation 4?

En Foundation 3 tuvimos el método fácil de usar de reveal ().

¿Qué puedes usar en Foundation 4? Por favor ayuda.

Respuestas

4 para la respuesta № 1

Estoy bastante seguro de que puedes simplemente usar el método .foundation en tu modal para llamar "abrir" en él .. Algo como:

$("#myModal").foundation("reveal", "open");

e: Acabo de revisar los documentos y sí, está ahí: http://foundation.zurb.com/docs/components/reveal.html

Busque "También puede abrir y cerrar Reveal a través de JavaScript:"


2 para la respuesta № 2

Desafortunadamente, en Foundation 4 debes tener estoactivar enlace para abrir un modal = / Desafortunadamente no porque tendrá que escribir mucho más código (eso no es cierto), sino porque esta implementación no es, digamos, bonita.

Mi código para el modal:

<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
<div id="modalContent"></div>
<a class="close-reveal-modal">&#215;</a>
</div>

Función JS para abrir y poner un poco de contenido en el modal

function openModal(url,params,text){

// If @url is not empty then we change the #modalContent value with the @url value
if(url !== "")
{
ajaxLoad("#modalContent",url,params);
}
// If @text is not empty then we change the #modalContent value with the @text value
else if(text !== "")
{
$("#modalContent").html(text);
}

// If both @url and @text are empty, then the #modalContent remains unchanged.
// Now we just show de modal with the changed (or not) content
$("a.reveal-link").trigger("click"); }

¡Espero eso ayude!


0 para la respuesta № 3

Para el acceso programático (javascript), documentos parece solo sugerir el lanzamiento a través del evento click.

Agrega tu Modal:

<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch.  It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">&#215;</a>
</div>

Establecer el disparador:

<a href="#" data-reveal-id="myModal" id="my-trigger">Click Me For A Modal</a>

Activar desencadenador mediante programación:

$("#my-trigger").trigger("click");

Hay que admitir que parece una solución temporal, tal vez esto se deba a su mayor enfoque de "peso ligero / móvil primero". Veamos qué trae la próxima versión.


0 para la respuesta № 4
$("#myModal").foundation("reveal", "open");