/ / Odhalenie modálu v nadácii 4 - zurb-foundation

Odhalenie modálu v nadácii 4 - zurb-foundation

Ako zverejňujete modálne programovo v nadácii 4?

V nadácii 3 sme mali ľahko použiteľnú metódu reveal ().

Čo môžete použiť v nadácii 4? Prosím pomôžte.

odpovede:

4 pre odpoveď č. 1

Som si celkom istý, že jednoducho môžete použiť metódu .foundation na svojom modálnom, aby ste na ňom zavolali "otvorené" .. Niečo ako:

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

e: Len skontrolovať dokumenty a yep, je to tam: http://foundation.zurb.com/docs/components/reveal.html

Pozrite sa na "Môžete tiež otvoriť a zavrieť Odkryť cez JavaScript:"


2 pre odpoveď č. 2

Bohužiaľ, v nadácii 4 to musíte maťspustiť odkaz na otvorenie modálnej = / Bohužiaľ nie preto, že budete musieť napísať oveľa viac kódu (to nie je pravda), ale pretože táto implementácia isnt, povedzme, pekná.

Môj kód pre modálne:

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

JS funkcia otvoriť a dať nejaký obsah do modálnej

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"); }

Dúfam, že to pomôže!


0 pre odpoveď č. 3

Pre programové (javascript) prístup k docs Zdá sa, že len navrhujú spustenie prostredníctvom udalosti kliknutia.

Pridajte svoj 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>

Nastavte spúšť:

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

Aktivovať spúšť programovo:

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

Je pravda, že to vyzerá ako práca okolo, možno je to kvôli zvýšenému zameraniu "ľahké / mobilné". Uvidíme, čo prinesie ďalšia verzia.


0 pre odpoveď č. 4
$("#myModal").foundation("reveal", "open");