/ / Ujawnienie modalu w fundamencie 4 - zurb-foundation

Ujawnienie modalu w fundamencie 4 - zurb-foundation

Jak można odkryć modalny programowo w Fundacji 4?

W Fundacji 3 mieliśmy łatwą w użyciu metodę reveal ().

Czego możesz użyć w Fundacji 4? Proszę pomóż.

Odpowiedzi:

4 dla odpowiedzi № 1

Jestem pewien, że możesz po prostu użyć metody .foundation na swoim modalu, aby wywołać "open" na niej. Coś jak:

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

e: Właśnie sprawdziłem dokumenty i tak, jest tam: http://foundation.zurb.com/docs/components/reveal.html

Poszukaj "Możesz również otwierać i zamykać Reveal przez JavaScript:"


2 dla odpowiedzi nr 2

Niestety, w Fundacji 4 musisz to miećwywołaj link, aby otworzyć modal = / Niestety nie dlatego, że będziesz musiał napisać o wiele więcej kodu (to nie jest prawda), ale ponieważ ta implementacja nie jest, powiedzmy, ładna.

Mój kod dla modalu:

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

Funkcja JS do otwierania i umieszczania pewnych treści w modalu

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

Mam nadzieję, że to pomoże!


0 dla odpowiedzi № 3

Dla programowego (javascript) dostępu docs wydają się sugerować uruchamianie tylko za pośrednictwem zdarzenia kliknięcia.

Dodaj swój 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>

Ustaw wyzwalacz:

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

Aktywuj wyzwalacz programowo:

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

Prawdą jest, że wygląda to na obejście, być może jest to spowodowane zwiększeniem ostrości "lekkości / mobilności". Zobaczmy, co przynosi następne wydanie.


0 dla odpowiedzi nr 4
$("#myModal").foundation("reveal", "open");