37

http://foundation.zurb.com/docs/reveal.phpの zurb Foundation の Web サイトには、以下を含むいくつかのオプションがリストされています。

open: モーダルが開く「前」にトリガーするコールバック関数。

開いた: モーダルが開かれた「後」にトリガーされるコールバック関数。

close: モーダルを閉じる準備の「前」にトリガーするコールバック関数。

closed: モーダルが閉じられた「後」にトリガーされるコールバック関数。

しかし、モーダルでそれらを使用する方法がわかりません。私は試した：

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

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

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

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

私はグーグルで検索しましたが、ヒットが見つかりませんでした。それを説明したり、例を挙げたり、関連リンクを提供したりできる人はいますか?

与えられた提案はうまくいきますが、私はさらに別の密接に関連した質問がありreveal()ます:

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

のような属性を 1 つ追加しようとしましたが、data-closeOnBackgroundClick="false"うまくいかないようです。正しい構文は何ですか? コールバック関数でも機能しますか?

4

9 に答える 9

41

上記の答えは私にはうまくいきませんでした。これが機能したものです（Foundation 4およびjQuery）：

$('#myModal').bind('opened', function() {
  console.log("myModal opened");
});
于 2013-05-20T20:54:51.740 に答える
16

通常どおりに呼び出しrevealますが、オプションの名前と対応する関数をオブジェクトとして含めます。

//Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });
于 2012-12-07T15:40:33.933 に答える
14

Zurb Foundation v6 では、これらのイベントの名前が次のように変更されましたxxx.zf.reveal。

  • closeme.zf.reveal モーダルが開く直前に発生します。現在開いている他のモーダルを閉じます
  • open.zf.reveal モーダルが正常に開いたときに発生します。
  • closed.zf.reveal モーダルが閉じられたときに発生します。

ソース: http://foundation.zurb.com/sites/docs/reveal.html#js-events

例:

  • すべてのモーダルに対して発生する一般的なコールバック:

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

  • 特定のモーダルが開かれたときに発生するコールバック:

    $(document).on('open.zf.reveal', '#<ELEMENT-ID>[data-reveal]', function() {
  console.log('This works');
});
于 2016-08-19T00:17:38.270 に答える
4

ミートロボットが言ったように、これを機能させるには、対象のアクションでモーダルにバインドします。私はこれを機能させました：

$('#myModal').bind('closed', function() {
    console.log("myModal closed!");
});
于 2013-09-17T13:34:31.973 に答える