1

我正在使用它来运行 jquery 函数：

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

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

而不是在页面加载时同时运行这两个，我怎样才能让它们一次运行一个？

它们是页面加载时出现的弹出框 - 所以我想：

  1. 使第一个负载，
  2. 然后当盒子关闭时，第二个将加载。
  3. 等等...
4

3 回答 3

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 回答
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 回答
-1

你试过在reveal方法中使用回调吗？

$('#customer_popup_notes').reveal(function(){
  $('#customer_on_hold').reveal();
});
于 2013-10-02T16:12:10.580 回答