Fundación Caja modal
cuadro de modal se muestra en un pop encabezado de página.
Podemos estar en un elemento contenedor (como <div id="myModal" ) utiliza un identificador único, y añadir .reveal-modal clases y data-reveal atributo para añadir el cuadro de modal. Podemos utilizar en cualquier elemento de data-reveal-id=" id " " atributo cuadro modal abierta Ali. Identificación del id debe ser compatible con el contenedor (ejemplos son "myModal").
Si desea hacer clic en el área exterior de la caja para cerrar el cuadro de modal modal. Puede cerrar el cuadro de modal botón <a> añadir etiquetas .close-reveal-modal clase.
Nota: El regulador requiere JavaScript. Por lo que necesita para inicializar JS OUNDATION:
Ejemplos
<= "Botón" de tipo botón de clase = "button" datos revelan-id = "myModal"> Haga clic para abrir modal </ botón>
<! - El contenido modal ->
<Div id = clase "myModal" = "revelar-modal" datos revelan>
<H2> La partida en modal. < / H2>
<P> Un texto en el modal . </ P>
<P> Un texto en el modal . </ P>
<A clase = "close-reveal -modal"> y tiempos; </ a>
</ Div>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Modal tamaño de la caja
Se pueden añadir las siguientes clases en el contenedor cuadro modal para ajustar el tamaño de la caja modal:
-
.tiny: 30% Anchura -
.small: 40% Anchura -
.medium: 60% Anchura -
.large: 70% Anchura -
.xlarge: 95% Anchura -
.full: 100% de ancho y la altura
Nota: El valor por defecto en la tableta, portátil, ordenadores PC es 80% de la anchura en la pequeña pantalla es 100% de ancho.
Ejemplos
Trate »
cuadro modal incrustado
Puede incrustar el cuadro de modal en el cuadro de modal, se puede añadir un nuevo botón disparador en el primer cuadro de modal. Debe establecer un identificador único para el cuadro de modal incrustado:
Ejemplos
<A Href = "#" class = "button" data-reveal-id = "myModal"> clic para abrir el modal </ a>
<! - El primer Modal ->
<Div id = clase "myModal" = "revelar-modal" datos revelan>
<H2> Primera modal </ h2 >
<P> Un texto .. </ p>
<P> <a href = "#" data-reveal-id = "secondModal" class = "button"> abierto Segunda modal </ a> </ p>
<A clase = "close-reveal -modal"> y tiempos; </ a>
</ Div>
<! - El Segundo Modal ->
<Div id = clase "secondModal" = "revelar-modal" datos revelan>
! <H2> Tada Segunda modal < / h2>
<P> Un texto .. </ p>
<A clase = "close-reveal -modal"> y tiempos; </ a>
</ Div>
Trate »
El segundo cuadro de modal sustituirá al primer cuadro de modal. Si desea abrir un segundo cuadro de modal sin cerrar la primera caja modal. Se pueden añadir en el segundo cuadro de modal data-options="multiple_opened:true;" ;" propiedades:
Ejemplos
Trate »