How to make jquery functions run one at a time

Question

I am using this to run a jquery function:

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

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

Rather than both of these running at the same time when the page loads, how can I make them run one at a time?

They are popup boxes that appear when the page loads - so I want to:

1. make the first one load,
2. then when the box is closed, the second one will load.
3. and so on...

Answer 1

Since reveal does not have any official documents about this, I quickly read through the source code and give it a try. Hope it will help

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

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

Updated: Based on the code https://github.com/zurb/reveal/blob/master/jquery.reveal.js , you have 2 events: reveal:open , reveal:close

Answer 2

I don't have access to Foundation at the moment, so this is a best guess based on the documentation.

Store the modal id descriptors in an array, and set the index to 0.

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

Have a function that loads the modals based on the index and advances the index.

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

Load the initial modal (index = 0).

loadModal();

When the close-reveal-modal class is clicked wait until the modal closes (automatically - this is part of reveal), and then loads the next modal in the array.

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

It assumes your modal looks something like this (note the anchor with 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>

Here's a fiddle that tries to explain the concept using clickable divs.

Answer 3

have you tried using a callback in the reveal method?

$('#customer_popup_notes').reveal(function(){
  $('#customer_on_hold').reveal();
});