Menu icon Foundation
Foundation 5 Reveal Modal Programatically

I am trying to open a modal using javascript that will only pop-up after a user has begun uploading a file. Essentially, they open a modal (#parcel-modal) to upload then once they have submitted the file, another modal (#spinner-modal-window) pops up to show it processing.

However, when I use this method to do so:

  $('#parcel-modal').foundation('reveal', 'close');
  $('#spinner-modal-window').foundation('reveal', 'open');

The first modal closes, but the second opens with a reveal-modal-bg but the display is 'none' rather than block so the background of the page is no longer greyed out. The entire purpose of the spinner-modal-window is to keep the user from interacting with the page until an HTTP response is returned.

I tried this method as well:

$('#parcel-modal').foundation('reveal', 'close');
$(document).on('close.fndtn.reveal', '#parcel-modal', function () {
    $('#spinner-modal-window').foundation('reveal', 'open');
 });

which does work for keeping the display as block on the second modal. However, now if I attempt to reopen the upload modal (#parcel-modal) and close it even WITHOUT uploading anything, the second modal (#spinner-modal-window) opens. I suspect this has something to do with Foundation listening to every time the #parcel-modal closes and then running the function to open the #spinner-modal-window.

How can I fix this? I cannot find any documentation on either programmatically being able to open a second modal with a greyed out background or a way to reset the $(document) to only open the second modal when my method gets called. 

I have been stuck on this for three days. Please help!!

Foundation 5 Reveal Modal

I am trying to open a modal using javascript that will only pop-up after a user has begun uploading a file. Essentially, they open a modal (#parcel-modal) to upload then once they have submitted the file, another modal (#spinner-modal-window) pops up to show it processing.

However, when I use this method to do so:

  $('#parcel-modal').foundation('reveal', 'close');
  $('#spinner-modal-window').foundation('reveal', 'open');

The first modal closes, but the second opens with a reveal-modal-bg but the display is 'none' rather than block so the background of the page is no longer greyed out. The entire purpose of the spinner-modal-window is to keep the user from interacting with the page until an HTTP response is returned.

I tried this method as well:

$('#parcel-modal').foundation('reveal', 'close');
$(document).on('close.fndtn.reveal', '#parcel-modal', function () {
    $('#spinner-modal-window').foundation('reveal', 'open');
 });

which does work for keeping the display as block on the second modal. However, now if I attempt to reopen the upload modal (#parcel-modal) and close it even WITHOUT uploading anything, the second modal (#spinner-modal-window) opens. I suspect this has something to do with Foundation listening to every time the #parcel-modal closes and then running the function to open the #spinner-modal-window.

How can I fix this? I cannot find any documentation on either programmatically being able to open a second modal with a greyed out background or a way to reset the $(document) to only open the second modal when my method gets called. 

I have been stuck on this for three days. Please help!!

aamir khan 9 days ago