Second zurb Reveal Modal window - possible?

4
votes

I'm using Zurb's Reveal to display modal windows on a webpage.

I have to display a small modal window on an already opened modal window (the latter contains a form).

I added onclick="$('#ypopup').reveal();" to an a element on the form, and set the z-index of #ypopup (the second modal div) to 9999. This way the second modal shows up well.

But when I close it, not only the second modal disappears, but also the background of the first modal. The first modal remains visible, however it can't be closed. Only a page reload helps.

Is it possible to have a second reveal modal on an open reveal modal window?

3
javascriptjqueryzurb-foundation

3 Answers

3
votes

I would say no. Looking at the jQuery code, it looks like modal background is only one instance. When you close any modal it closes the only modal background on the page. You will need to modify the plugin to make it work properly.

The source code can be found here: https://github.com/zurb/foundation/blob/master/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js

1
votes

Add this to your code:

$(document).on('closed.fndtn.reveal',function() { $('.reveal-modal').removeClass('toback'); })

This will cause all reveals to be above the reveal background, thus pulling your 1st reveal up.

-2
votes

...not a problem at all !

Try this...

  1. give each modal a unique id#... myModal1, myModal2, myModal3...etc...

  2. add a separate jquery function in document ready for each modal... and change the divisions accordingly.

$(document).ready(function() {

 $('#at-button1').click(function(e) {
      e.preventDefault();
  $('#myModal1').reveal();
 });

  $('#at-button2').click(function(e) {
      e.preventDefault();
  $('#myModal2').reveal();
 });

 $('#at-button3').click(function(e) {
      e.preventDefault();
  $('#myModal3').reveal();
 });