Menu icon Foundation
Reveal problem with Foundation 5

Hey folks,

My code which was previously working on 4.3.2 seems to have run into a weird situation with 5.0.

I have a Reveal modal dialog that pops up on the trigger of a button. Nothing fancy. In 5.0, I can't seem to close to the dialog by clicking on the background ('.reveal-modal-bg'). Is this a bug or is there more to it?

thanks.
Keng

Reveal Foundation 5

Hey folks,

My code which was previously working on 4.3.2 seems to have run into a weird situation with 5.0.

I have a Reveal modal dialog that pops up on the trigger of a button. Nothing fancy. In 5.0, I can't seem to close to the dialog by clicking on the background ('.reveal-modal-bg'). Is this a bug or is there more to it?

thanks.
Keng


Joshua Steele gave the most helpful answer for this post
Joshua Steele about 5 years ago

I had this same issue after upgrading a Rails app from F4. Make sure you add the data-reveal tag to your modal div and to the link or button that fires it. So for example:

<!-- Firing element -->
<a href="#" data-reveal-id="SendModal" class="button" data-reveal>Send Lesson</a>

<!-- Modal window -->
<div id="SendModal" class="reveal-modal" data-reveal>

For me, this resolved the issue. Hope that helps!

This post has been closed. No new replies can be added.

DSci about 5 years ago

Error on Firebug
Javascript
TypeError: r is undefined
...nit");t.which===27&&r.close_on_esc&&n.foundation("reveal","close")}),!0},open:fu...

Joshua Steele about 5 years ago

I had this same issue after upgrading a Rails app from F4. Make sure you add the data-reveal tag to your modal div and to the link or button that fires it. So for example:

<!-- Firing element -->
<a href="#" data-reveal-id="SendModal" class="button" data-reveal>Send Lesson</a>

<!-- Modal window -->
<div id="SendModal" class="reveal-modal" data-reveal>

For me, this resolved the issue. Hope that helps!

Lynda Spangler about 5 years ago

@Joshua Steele - This fixed the issue for me. Thank You!

ZURB needs to fix the docs because they have data-reveal for the modal but not for the firing element.

Lynda Spangler about 5 years ago

I am also seeing the same JS error. i cannot close reveal at all. I have to refresh the page to get it to go away!