/ / Rivelazione di un modale in Foundation 4 - zurb-foundation

Rivelare un modale in Foundation 4 - zurb-foundation

Come si rivela una modal al livello di programmazione in Foundation 4?

In Foundation 3 abbiamo avuto il metodo reveal () facile da usare.

Cosa puoi usare in Foundation 4? Per favore aiuto.

risposte:

4 per risposta № 1

Sono abbastanza sicuro che puoi semplicemente usare il metodo .foundation sul tuo modal per chiamare "open" su di esso .. Qualcosa del tipo:

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

e: appena controllato i documenti e sì, è proprio lì: http://foundation.zurb.com/docs/components/reveal.html

Cerca "Puoi anche aprire e chiudere Reveal tramite JavaScript:"


2 per risposta № 2

Sfortunatamente, in Foundation 4 devi avere questotrigger link per aprire un modal = / Sfortunatamente non perché dovrai scrivere molto più codice (non è vero), ma perché questa implementazione non è, diciamo, carina.

Il mio codice per il modale:

<!-- 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>

Funzione JS per aprire e inserire del contenuto nel 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"); }

Spero che sia d'aiuto!


0 per risposta № 3

Per l'accesso programmatico (javascript) il docs sembra suggerire solo il lancio tramite evento click.

Aggiungi il tuo 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>

Imposta il trigger:

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

Attiva il trigger a livello di codice:

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

Certo, sembra un aggiramento, forse questo è dovuto al loro accresciuto focus "lightweight / mobile-first". Vediamo cosa porterà la prossima versione.


0 per risposta № 4
$("#myModal").foundation("reveal", "open");