Modal de Foundation
Un modal es una ventana emergente que se muestra en la parte superior de la página.
Podemos, en un elemento contenedor (como<div id="myModal") usar un ID único, y agregar.reveal-modalclase ydata-revealatributo para agregar el modal. Podemos usar en cualquier elementodata-reveal-id="id"el atributo para abrir el modal.idDebe coincidir con el id del contenedor (en el ejemplo, "myModal").
Si deseas cerrar el modal al hacer clic en el área fuera del modal. Puedes, en el botón de cierre del modal<a>agregar en la etiqueta.close-reveal-modalla clase para lograrlo.
Nota:El slider necesita JavaScript. Por lo tanto, necesitas inicializar Foundation JS:
Ejemplo
<button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>
<!-- The Modal Content -->
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Heading in Modal.</h2>
<p>Some text in the modal.</p>
<p>Some text in the modal.</p>
<a class="close-reveal-modal">×</a>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Pruébalo »
Tamaño del modal
Puedes añadir las siguientes clases al contenedor del modal para establecer el tamaño del modal:
.tiny: 30% de ancho.small: 40% de ancho.medium: 60% de ancho.large: 70% de ancho.xlarge: 95% de ancho.full: 100% de ancho y alto
Nota:En tabletas, portátiles y PC, el ancho predeterminado es del 80%; en dispositivos con pantalla pequeña, es del 100%.
Ejemplo
Pruébalo »
Modal incrustado
Puedes incrustar un modal dentro de otro modal. Puedes agregar un nuevo botón de activación en el primer modal. Debes configurar un id único para el modal incrustado:
Ejemplo
<a href="#" class="button" data-reveal-id="myModal">Click To Open Modal</a>
<!-- The First Modal -->
<div id="myModal" class="reveal-modal" data-reveal>
<h2>First Modal</h2>
<p>Some text..</p>
<p><a href="#" data-reveal-id="secondModal" class="button">Open Second Modal</a></p>
<a class="close-reveal-modal">×</a>
</div>
<!-- The Second Modal -->
<div id="secondModal" class="reveal-modal" data-reveal>
<h2>Tada! Second Modal</h2>
<p>Some text..</p>
<a class="close-reveal-modal">×</a>
</div>
Pruébalo »
El segundo modal reemplazará al primer modal. Si deseas que el primer modal no se cierre al abrir el segundo modal, puedes añadir en el segundo modaldata-options="multiple_opened:true;"el atributo:
Ejemplo
Pruébalo »