Reveal - Cuadros de diálogo modales sencillos y flexibles
Cuadros de diálogo modales, o ventanas emergentes, son útiles para la creación de prototipos y la producción. Fundación incluye Reveal nuestro plugin jQuery modal, para hacer esto fácil para usted.
Uso de Reveal
<script type="text/javascript" >
Reveal es muy fácil de conectar. Incluir el JS y CSS en su head (ambos de los cuales están incluidos en foundation.css foundation.js y, si se utiliza el paquete de código descargado). Usted puede llamar en el JS o incluir un parámetro "data-reveal-id". Estos son los pasos para empezar:
Markup
Recuerde: el modal debe estar en la final de la página, después de cualquiera de sus filas o columnas.
<div id="myModal" class="reveal-modal" >
<h2>Awesome. I have it.</h2>
<p class="lead" > Your couch. I it's mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal" > ×</a>
</div>
Llamar a Reveal
Hay dos maneras de hacer llamar a un referente de reveal. La primera consiste en adjuntar un controlador de algo (el botón más probable), entonces este llame a reveal:
<script type="text/javascript" >
$(document).ready(function() {
$('#buttonForModal').click(function() {
$('#myModal').reveal();
});
});
</script>
El nuevo hotness: sólo tiene que añadir un data-reveal-id para el objeto que desea disparador del modal cuando se hace clic …
<a href="#" class="button" data-reveal-id="myModal2" > Click Me For A Modal</a>
Esto abrirá el modal con el ID "myModal2" sin asociar un manejador o llamando al lector (ya que el plugin siempre está escuchando para ello).También puede pasar cualquiera de los parámetros, simplemente poniendo un data-nameOfParameter="value" (i.e. data-animation="fade")
Opciones
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animations are
closeOnBackgroundClick: true, //if you click background will modal close?
dismissModalClass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
Las opciones se pueden utilizar en la "data-reveal-id" puesta en práctica también, sólo como lo siguiente:
<a href="#" data-reveal-id="myModal" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal">Click for a modal</a>
