dialogo modale Fondazione
dialogo modale viene visualizzato in una finestra pop pagina di intestazione.
Siamo in grado di essere su un elemento contenitore (come <div id="myModal" ) utilizza un ID univoco, e aggiungere .reveal-modal classi e data-reveal attributo per aggiungere il dialogo modale. Siamo in grado di utilizzare su qualsiasi elemento di data-reveal-id=" id " " Ali scatola aperta modale attributo. id id deve essere coerente con il contenitore (esempi sono "myModal").
Se si vuole cliccare sulla zona fuori dagli schemi per chiudere la finestra modale modale. È possibile chiudere dialogo modale pulsante <a> aggiungere etichette .close-reveal-modal di classe.
Nota: Il cursore richiede JavaScript. Quindi è necessario inizializzare OUNDATION JS:
Esempi
<= Tipo di pulsante di classe "pulsante" = "button" Dati-rivelare-id = "myModal"> Clicca per aprire modale </ button>
<! - Il modale Contenuto ->
<Div id = "myModal" class = "rivelare-modali" data-rivelare>
<H2> Rubrica delle modale. < / H2>
<P> Alcuni testo nella modale . </ P>
<P> Alcuni testo nella modale . </ P>
class = <A "close-reveal -modal"> & volte; </ a>
</ Div>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »
Modale formato della scatola
È possibile aggiungere le seguenti classi sul contenitore di dialogo modale per impostare la dimensione del dialogo modale:
-
.tiny: 30% Larghezza -
.small: 40% Larghezza -
.medium: 60% Larghezza -
.large: 70% Larghezza -
.xlarge: 95% Larghezza -
.full: larghezza e altezza 100%
Nota: L'impostazione predefinita sulla tavoletta, notebook, computer PC è l'80% della larghezza sul piccolo schermo è la larghezza del 100%.
Esempi
Prova »
dialogo modale incorporato
È possibile incorporare il dialogo modale in dialogo modale, è possibile aggiungere un nuovo pulsante a scatto sul primo dialogo modale. È necessario impostare un ID univoco per il dialogo modale incorporato:
Esempi
<A Href = "#" class = "button" data-reveal-id = "myModal"> Clicca per aprire modale </ a>
<! - Il Primo modale ->
<Div id = "myModal" class = "rivelare-modali" data-rivelare>
<H2> Primo modale </ h2 >
<P> Del testo .. </ p>
<P> <a href = "#" data-reveal-id = "secondModal" class = "button"> Open Secondo modale </ a> </ p>
class = <A "close-reveal -modal"> & volte; </ a>
</ Div>
<! - La Seconda modale ->
<Div id = "secondModal" class = "rivelare-modali" data-rivelare>
<H2> Tada! Secondo modale < / h2>
<P> Del testo .. </ p>
class = <A "close-reveal -modal"> & volte; </ a>
</ Div>
Prova »
Il secondo dialogo modale sostituirà il primo dialogo modale. Se si vuole aprire un secondo dialogo modale senza chiudere il primo dialogo modale. È possibile aggiungere al secondo di dialogo modale data-options="multiple_opened:true;" ;" proprietà:
Esempi
Prova »