Wie verwende ich Zurb Foundation mit offenen, geöffneten, geschlossenen und geschlossenen Callback-Funktionen?

Auf zurb foundation-website unter http://foundation.zurb.com/docs/reveal.php Sie einige Optionen, einschließlich

öffnen: callback-Funktion, die ausgelöst wird, 'bevor' das modal öffnet.

geöffnet: callback-Funktion, die ausgelöst 'nach' der modal geöffnet wird.

schließen: callback-Funktion, die ausgelöst wird, 'bevor' der modalen bereitet zu schließen.

geschlossen: callback-Funktion, die ausgelöst 'nach' das modal geschlossen ist.

Aber ich habe keine Ahnung, wie Sie mit meinem modal.
Itried

$('#myModal').closed(function()
{});

$('#myModal').trigger('reveal:closed')(
{});

$('#myModal').reveal.closed(function()
{});

$('#myModal').reveal().closed(function()
{});

Habe ich gegoogelt, fand aber keine trifft. Wer kann es erklären oder mir ein Beispiel oder einen link dazu?

Danke! Es funktioniert!

Ich habe noch eine andere, eng Verwandte Frage für reveal()

<a href="#" class="button" data-reveal-id="myModal2">Click Me For A Modal</a>);

Habe ich versucht, ein Attribut wie data-closeOnBackgroundClick="false" , doen ' T scheinen zu arbeiten. Was sollte die richtige syntax? Wird es Arbeit für die callback-Funktion?

InformationsquelleAutor der Frage user1882562 | 2012-12-06

  1. 15

    Call reveal wie Sie normalerweise würden, aber den Namen der option und die entsprechende Funktion als Objekt:

    //Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });

    InformationsquelleAutor der Antwort chrisjsherm

  2. 41

    Obigen Antwort nicht für mich arbeiten. Hier ist, was funktioniert (Foundation 4 und jQuery):

    $('#myModal').bind('opened', function() {
  console.log("myModal opened");
});

    InformationsquelleAutor der Antwort meatrobot

  3. 19

    Ereignis-Bindings für Zurb Foundation Offenbaren -

    Gibt es eine Reihe von Veranstaltungen, die Sie binden können, um für das auslösen von callbacks:

    $(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  //your code goes here...
});

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
  //your code goes here...
});

$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
  //your code goes here...
});

$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
  //your code goes here...
});

    Wenn Sie mehrere Daten-zeigen, verwendet in der single-Seite wie folgt :

    <div class="content reveal-modal" id="element-1" data-reveal>
<div class="content reveal-modal" id="element-2" data-reveal>

    Dann in diesen Situationen können Sie die trigger-callback gleiche, wie oben erklärt, aber mit der kleinen Modifikation, wie unten gezeigt :

    $(document).on('open.fndtn.reveal', '#element-1[data-reveal]', function () {
  //your code goes here...
});

$(document).on('open.fndtn.reveal', '#element-2[data-reveal]', function () {
  //your code goes here...
});

    InformationsquelleAutor der Antwort Kedar.Aitawdekar

  4. 7

    Auf Zurb Foundation v6, waren diese Ereignisse umbenannt, um xxx.zf.reveal:

    • closeme.zf.zeigen Feuert, unmittelbar bevor das modal öffnet. Schließt alle anderen modals, die derzeit geöffnet sind
    • öffnen.zf.zeigen ausgelöst, wenn das modal hat erfolgreich geöffnet werden.
    • geschlossen.zf.zeigen ausgelöst, wenn das modal ist fertig schließen.

    Quelle: http://foundation.zurb.com/sites/docs/reveal.html#js-events

    Beispiele:

    • Generic callback, der ausgelöst wird, für alle modals:

      $(document).on('open.zf.reveal', '[data-reveal]', function() {
  console.log('This works');
});

    • Callback, der ausgelöst wird, wenn ein bestimmter modal geöffnet wird:

      $(document).on('open.zf.reveal', '#<ELEMENT-ID>[data-reveal]', function() {
  console.log('This works');
});

    InformationsquelleAutor der Antwort sequielo

  5. 3

    Wie meatrobot sagte, diese Arbeit, die Sie wollen, zu binden, um die modale mit der Aktion, die Sie sind welche. Ich habe diese arbeiten:

    $('#myModal').bind('closed', function() {
    console.log("myModal closed!");
});

    InformationsquelleAutor der Antwort Chris Roane

  6. 2

    Dies ist ein wenig spät, aber für den zweiten Teil fügen Sie die Attribute als Semikolon getrennte Liste der Werte in der Daten-Optionen-Attribut (getestet mit foundation 5), ich.e:


    <div id="myModal" data-options="close_on_background_click:false;" class="reveal-modal">

    Und Nein, Sie können nicht übergeben werden Funktionen dieser Art und Weise habe ich versucht 🙂

    InformationsquelleAutor der Antwort James Lock

  7. 1

    Blick auf Foundation 5 und gefunden, dass die Enthüllung Bibliothek-Trigger, open, geöffnet, schließen und geschlossenen Veranstaltungen. Befestigen Sie einfach einen handler an das Ereignis, das Sie wollen.

    $('#myModal').on([event], handler)

    Können Sie auch pass-Handler, die über das settings-argument.
    Check this out: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

    InformationsquelleAutor der Antwort djtek

  8. 1

    Die foundation 5 Dokumentation gibt an, der Festlegung des lösungsumfangs der reveal-events zu den 'beweisen' eventspace. Jedoch, die tatsächlichen modal Ereignisse nicht scheinen, um das Feuer konsequent innerhalb dieser eventspace. Entfernen Sie diese Spezifikation, die das Problem behebt:

    $(document).on('opened.fndtn', '[data-reveal]', function() {
  console.log('This works');
});

    InformationsquelleAutor der Antwort Brian Peacock

  9. 0

    In der Stiftung 3.2.5 sollten Sie bind 'verraten:eröffnet' so:

    $('#myModal').bind('reveal:opened', function() {
   console.log("myModal opened");
});

    Grüße, MarianoC.

    InformationsquelleAutor der Antwort MarianoC

Schreibe einen Kommentar