/ / Enthüllung eines Modals in Foundation 4 - zurb-foundation

Enthüllung eines Modals in Foundation 4 - zurb-foundation

Wie enthüllen Sie in Foundation 4 modal programmatisch?

In Foundation 3 hatten wir die einfach zu verwendende Methode reveal ().

Was können Sie in Foundation 4 verwenden? Bitte helfen Sie.

Antworten:

4 für die Antwort № 1

Ich bin mir ziemlich sicher, dass Sie einfach die .foundation-Methode auf Ihrem Modal verwenden können, um "open" darauf zu rufen. Etwas wie:

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

e: Habe gerade die Dokumente überprüft und ja, Es ist genau dort: http://foundation.zurb.com/docs/components/reveal.html

Suchen Sie nach "Sie können Reveal auch über JavaScript öffnen und schließen:"


2 für die Antwort № 2

Leider müssen Sie dies in Foundation 4 habentrigger link um ein modal zu öffnen = / Leider nicht, weil du viel mehr Code schreiben musst (das ist nicht wahr), aber weil diese Implementierung isnt ist, lass uns sagen, hübsch.

Mein Code für das 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>

JS-Funktion zum Öffnen und Einfügen von Inhalten in das 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"); }

Ich hoffe es hilft!


0 für die Antwort № 3

Für programmatische (Javascript) Zugriff auf die Dokumente scheinen nur das Starten per Klick-Event zu empfehlen.

Füge dein Modal hinzu:

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

Setze den Auslöser:

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

Auslöser programmgesteuert aktivieren:

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

Zugegeben, es scheint ein Workaround zu sein, vielleicht liegt das an ihrem erhöhten Schwerpunkt "Leichtgewicht / Mobile-first". Mal sehen, was die nächste Version bringt.


0 für die Antwort № 4
$("#myModal").foundation("reveal", "open");