/ / Revelando um Modal na Foundation 4 - zurb-foundation

Revelando um Modal na Fundação 4 - zurb-foundation

Como você revela um modal programaticamente no Foundation 4?

Na Foundation 3, nós tivemos o método de usar o método reveal ().

O que você pode usar na Foundation 4? Por favor ajude.

Respostas:

4 para resposta № 1

Tenho certeza que você pode simplesmente usar o método .foundation no seu modal para chamar de "aberto". Algo como:

$("#myModal").foundation("reveal", "open");

e: Apenas verifiquei os documentos e sim, está bem aqui: http://foundation.zurb.com/docs/components/reveal.html

Procure por "Você também pode abrir e fechar o Reveal via JavaScript:"


2 para resposta № 2

Infelizmente, na Foundation 4 você deve ter estegatilho link para abrir um modal = / Infelizmente não porque você vai ter que escrever muito mais código (isso não é verdade), mas porque esta implementação não é, vamos dizer, bonita.

Meu código para o modal:

<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
<div id="modalContent"></div>
<a class="close-reveal-modal">&#215;</a>
</div>

Função JS para abrir e colocar algum conteúdo no modal

function openModal(url,params,text){

// If @url is not empty then we change the #modalContent value with the @url value
if(url !== "")
{
ajaxLoad("#modalContent",url,params);
}
// If @text is not empty then we change the #modalContent value with the @text value
else if(text !== "")
{
$("#modalContent").html(text);
}

// If both @url and @text are empty, then the #modalContent remains unchanged.
// Now we just show de modal with the changed (or not) content
$("a.reveal-link").trigger("click"); }

Espero que ajude!


0 para resposta № 3

Para acesso programático (javascript), o docs parece sugerir apenas o lançamento via evento click.

Adicione o seu Modal:

<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch.  It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">&#215;</a>
</div>

Definir o gatilho:

<a href="#" data-reveal-id="myModal" id="my-trigger">Click Me For A Modal</a>

Ativar gatilho programaticamente:

$("#my-trigger").trigger("click");

É certo que parece uma solução alternativa, talvez isso se deva ao alto foco "leve / móvel em primeiro lugar". Vamos ver o que o próximo lançamento traz.


0 para a resposta № 4
$("#myModal").foundation("reveal", "open");