web-dev-qa-db-ja.com

Zurb Foundationを使用して、オープン、オープン、クローズ、クローズのコールバック関数を明らかにする方法は？

Zurb FoundationのWebサイト http://foundation.zurb.com/docs/reveal.php には、

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

開いた：モーダルが開かれた後、トリガーするコールバック関数。

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

closed：モーダルが閉じた後の「トリガー」となるコールバック関数。

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

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

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

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

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

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

ありがとうございました！できます！

私はreveal（）についてさらに別の密接に関連した質問があります

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

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

eventsjavascript-eventscallbackmodal-dialogzurb-foundation
34
user1882562

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

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

上記の答えは私にはうまくいきませんでした。動作したのは次のとおりです（Foundation 4およびjQuery）：

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

Zurb Foundationのイベントバインディングの公開-

コールバックをトリガーするためにバインドできる一連のイベントがあります。

$(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...
});

次のように単一ページで複数のデータ公開を使用している場合：

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

その後、この状況では、上記で説明したのと同じコールバックをトリガーできますが、以下に示すように少し変更するだけです。

$(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...
});
19
Kedar.Aitawdekar

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');
});
11
sequielo

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

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

これは少し遅れますが、2番目の部分では、属性をdata-options属性（Foundation 5でテスト済み）の値のセミコロン区切りリストとして追加します。

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

そして、あなたはこの方法で関数を渡すことはできません、私は試しました:)

2
James Lock

Foundation 5のドキュメントでは、「明らかにする」イベントスペースに明らかにするイベントの範囲を指定しています。ただし、実際のモーダルイベントは、このイベントスペース内で一貫して発生するようには見えません。この仕様を削除すると、問題が修正されます。

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

Foundation 5を見ると、公開ライブラリがopen、open、close、closeの各イベントをトリガーしていることがわかりました。必要なイベントにハンドラーを添付するだけです。

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

設定引数を介してハンドラーを渡すこともできます。これをチェックしてください： https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

1
djtek

Foundation 3.2.5では、次のように 'reveal：opened'をバインドする必要があります。

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

よろしく、MarianoC。

0
MarianoC