1

これを使用してjquery関数を実行しています：

<script type="text/javascript">$('#customer_popup_notes').reveal();</script>

<script type="text/javascript">$('#customer_on_hold').reveal();</script>

ページの読み込み時にこれらの両方を同時に実行するのではなく、一度に 1 つずつ実行するにはどうすればよいですか?

これらは、ページが読み込まれたときに表示されるポップアップ ボックスです。

  1. 最初のロードを行い、
  2. ボックスが閉じられると、2 番目のボックスが読み込まれます。
  3. 等々...
4

3 に答える 3

0

Reveal にはこれに関する公式ドキュメントがないため、ソース コードをざっと読んで試してみました。それが役立つことを願っています

$('#customer_popup_notes').bind('reveal:close', function(){
  $('#customer_on_hold').reveal();
})

$('#customer_popup_notes').reveal();

更新: コードhttps://github.com/zurb/reveal/blob/master/jquery.reveal.jsに基づいて、2 つのイベントがあります: reveal:open、reveal:close

于 2013-10-02T16:15:15.343 に答える
0

現時点では Foundation にアクセスできないため、これはドキュメントに基づく最良の推測です。

モーダル ID 記述子を配列に格納し、インデックスを 0 に設定します。

var arr = ['#customer_popup_notes', '#customer_on_hold', 'modal3', 'modal4'];
var index = 0;

インデックスに基づいてモーダルをロードし、インデックスを進める関数を用意します。

function loadModal () {
  $(arr[index]).foundation('reveal', 'open');
  index++;
}

初期モーダルを読み込みます (インデックス = 0)。

loadModal();

クラスがクリックされると、モーダルが閉じるまで待機しclose-reveal-modal(自動的に - これはリビールの一部です)、配列内の次のモーダルをロードします。

$(document).on('click', '.close-reveal-modal', function () {
  $(arr[index - 1]).foundation('reveal', 'close');
  if (index < arr.length) { setTimeout(loadModal, 300); }
});

モーダルが次のようになっていることを前提としています (アンカーに が付いていることに注意してくださいclass="close-reveal-modal")。

<div id="customer_popup_notes" class="reveal-modal">
  <h2>Awesome. I have it 1.</h2>
  <a class="close-reveal-modal">&#215;</a>
</div>

これは、クリック可能な div を使用して概念を説明しようとするフィドルです。

于 2013-10-02T16:22:21.773 に答える