Zurb Foundation 5 - Reveal via JavaScript triggered in another reveal

Question

I have a site running Zurb Foundation 5 and I deploy multiple Reveal modals on a page. When they are loaded via $('#DIVID').foundation('reveal', 'open'); they function correctly, but when I trigger a different modal via a button within a modal using the following I am receiving unexpected results.

<script>
$('#a_msg').on('click', '#v_update', function () {
$('#a').foundation('reveal', 'close');
$('#v').foundation('reveal', 'open');
});
</script>

The first modal closed and then the second modal fires, but when I attempt to close the second modal clicking the background does not close it, and clicking the a class="close-reveal-modal" button closed the modal, but the background remains greyed out.

Error

Uncaught TypeError: Cannot read property 'bg_class' of undefined

From the below foundation.js source code it looks like the second modal is not being initialized correctly.

      S(document)
        .on('click.fndtn.reveal', this.close_targets(), function (e) {

          e.preventDefault();

          if (!self.locked) {
            var settings = S('[' + self.attr_name() + '].open').data(self.attr_name(true) + '-init'),
                bg_clicked = S(e.target)[0] === S('.' + settings.bg_class)[0];
Uncaught TypeError: Cannot read property 'bg_class' of undefined (repeated 2 times)

            if (bg_clicked && !settings.close_on_background_click) {
              return;
            }

            self.locked = true;
            self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open') : S(this).closest('[' + self.attr_name() + ']'));
          }
        });

      if(S('[' + self.attr_name() + ']', this.scope).length > 0) {
        S(this.scope)
          // .off('.reveal')
          .on('open.fndtn.reveal', this.settings.open)
          .on('opened.fndtn.reveal', this.settings.opened)
          .on('opened.fndtn.reveal', this.open_video)
          .on('close.fndtn.reveal', this.settings.close)
          .on('closed.fndtn.reveal', this.settings.closed)
          .on('closed.fndtn.reveal', this.close_video);
      } else {
        S(this.scope)
          // .off('.reveal')
          .on('open.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.open)
          .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.opened)
          .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.open_video)
          .on('close.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.close)
          .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.closed)
          .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.close_video);
      }

      return true;
    },

Does anyone have an experience getting a reveal to fire properly from a link within another open reveal?

notyou notyou · Accepted Answer · 2014-08-26T04:49:02

The background is not toggled correctly during switching between different modals.

Use the following after the last modal is closed:

$('.reveal-modal-bg').remove();

Removing the div will take the symptom (background overlay) away and therefore stop js errors with bg_class undefined.

Zurb Foundation 5 - Reveal via JavaScript triggered in another reveal

1 Answers