caixa de modal Foundation
caixa de modal é exibida em um pop cabeçalho da página.
Podemos estar em um elemento de recipiente (como <div id="myModal" ) usa uma identificação única, e adicionar .reveal-modal classes e data-reveal atributo para adicionar a caixa de modal. Podemos usar em qualquer elemento de data-reveal-id=" id " " atributo Ali caixa aberta modal. id id deve ser consistente com o recipiente (exemplos são "myModal").
Se você quiser clicar na área fora da caixa para fechar a caixa modal modal. Você pode fechar a caixa modal botão <a> adicionar rótulos .close-reveal-modal classe.
Observação: O regulador exige JavaScript. Então, você precisa inicializar OUNDATION JS:
Exemplos
<Tipo botão = "button" classe = "button" dados revelam-id = "myModal"> Clique para abrir Modal </ button>
<! - O conteúdo Modal ->
<Div id = "myModal" class = "revelam-modal" data-revelar>
<H2> Direcção no Modal. < / H2>
<P> Algum texto no modal . </ P>
<P> Algum texto no modal . </ P>
class = <A "close-reveal -modal"> & vezes; </ a>
</ Div>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
tamanho da caixa Modal
Você pode adicionar as seguintes classes no recipiente caixa de modal para definir o tamanho da caixa modal:
-
.tiny: 30% Largura -
.small: 40% Largura -
.medium: 60% Largura -
.large: 70% Largura -
.xlarge: 95% Largura -
.full: 100% largura e altura
Nota: O padrão no tablet, notebook, computadores PC é de 80% da largura na tela pequena é largura de 100%.
Exemplos
tente »
caixa de modal incorporado
Você pode incorporar a caixa de modal na caixa modal, você pode adicionar um novo botão disparador na primeira caixa de modal. Você deve definir uma identificação única para a caixa modal incorporado:
Exemplos
<A Href = "#" class = "button" data-reveal-id = "myModal"> Clique a abrir Modal </ a>
<! - The First Modal ->
<Div id = "myModal" class = "revelam-modal" data-revelar>
<H2> Primeira Modal </ h2 >
<P> Algum texto .. </ p>
<P> <a href = "#" data-reveal-id = "secondModal" class = "button"> Abrir Segundo Modal </ a> </ p>
class = <A "close-reveal -modal"> & vezes; </ a>
</ Div>
<! - A Segunda Modal ->
<Div id = "secondModal" class = "revelam-modal" data-revelar>
<H2> Tada! Segunda Modal < / h2>
<P> Algum texto .. </ p>
class = <A "close-reveal -modal"> & vezes; </ a>
</ Div>
tente »
A segunda caixa modal irá substituir a primeira caixa de modal. Se você deseja abrir uma segunda caixa modal sem fechar a primeira caixa de modal. Você pode adicionar em segunda caixa de modal data-options="multiple_opened:true;" ;" propriedades:
Exemplos
tente »