/ / Révéler un modal dans Foundation 4 - zurb-foundation

Révéler un modal dans Foundation 4 - zurb-foundation

Comment révélez-vous un modal par programmation dans Foundation 4?

Dans Foundation 3, nous avons eu recours à la méthode révélé () facile à utiliser.

Que pouvez-vous utiliser dans Foundation 4? S'il vous plaît aider.

Réponses:

4 pour la réponse № 1

Je suis sûr que vous pouvez simplement utiliser la méthode .foundation sur votre modal pour appeler "open" dessus. Quelque chose comme:

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

e: Je viens de vérifier les documents et oui, c’est juste là: http://foundation.zurb.com/docs/components/reveal.html

Recherchez "Vous pouvez également ouvrir et fermer Reveal via JavaScript:"


2 pour la réponse № 2

Malheureusement, dans Foundation 4, vous devez avoir cecitrigger link pour ouvrir un modal = / Malheureusement non parce que vous devrez écrire beaucoup plus de code (ce n'est pas vrai), mais parce que cette implémentation n'est pas, disons, jolie.

Mon code pour le 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>

Fonction JS pour ouvrir et mettre du contenu dans le 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"); }

J'espère que cela aide!


0 pour la réponse № 3

Pour programmatique (javascript) accéder à la docs semble suggérer de ne lancer que par événement click.

Ajoutez votre 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>

Définissez le déclencheur:

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

Activer le déclencheur par programmation:

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

Certes, cela ressemble à une solution de rechange, peut-être est-ce dû à leur accent mis sur le poids et la mobilité. Voyons ce que la prochaine version apporte.


0 pour la réponse № 4
$("#myModal").foundation("reveal", "open");