Zurb Foundation 6 Reveal doesn't work

Question

I've downloaded the new Zurb Foundation 6 complete package (Foundation for Sites). The archived file contains the following files and folders:

[css] > app.css, foundation.css, foundation.min.css
[img] > [empty folder]
[js]  >
  app.js
  foundation.js
  foundation.min.js
  vendor > jquery.min.js, what-input.min.js

I included the JS file in the footer and the CSS at the header:

<!-- foundation library and initialization -->
<script src="/Foundation/js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

Error in Chrome

I try to use REVEAL component (it worked in Foundation 5), but this time it throws me an error:

Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for i.

I've looked inside the Foundation.min.js and it has REVEAL in it. I download the complete package, so it should work, but it doesn't.

The JS code that should trigger the modal:

$('#submit-modal').foundation('reveal', 'open');

UPDATE 1: Tried on a fresh page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Foundation/css/foundation.min.css" rel="stylesheet" />
</head>
<body>
    <div class="row">this is the body of the page</div>
     <div id="popup-modal" class="reveal-modal full" data-reveal aria-labelledby="pop-up-modal-title" aria-hidden="true" role="dialog">
         test
     </div>

<script src="/Foundation/js/vendor/jquery.min.js"></script>

<!-- foundation library and initalization -->
<script src="/Foundation/js/vendor/what-input.min.js"></script>
<script src="/Foundation/js/foundation.js"></script>

<script>
    $(document).foundation();
</script>

</body>
</html>

The text of the popup appeared on the page, it's even not hidden by default, and I get an error: Uncaught ReferenceError: We're sorry, 'Reveal' is not an available method for Reveal when trying to run the command:

$('#popup-modal').foundation('reveal', 'open');

From the console.

Foundation 6 is a fresh release, and I;ve might missed something. I upgraded to Foundation 6 from Foundation 5. Foundation 5 Reveal worked ok, but after changing to the new Foundation 6 some components start not working out.

I checked the Documentation and the initialization and classes are the same.

score 40 · Accepted Answer · edited Mar 24 '20 at 05:14

40

Try with

var popup = new Foundation.Reveal($('#popup-modal'));

and then:

popup.open();

$('#popup-modal').foundation('reveal', 'open'); doesn't work in Foundation 6 anymore.

edited Mar 24 '20 at 05:14

rogerdpack

62,887
36
269
388

answered Nov 22 '15 at 17:04

juliancwirko

1,282
12
15

Yep, and also they changed the class to 'reveal' instead of 'reveal-modal'. Works, thank! – Liron Harel Nov 22 '15 at 17:06
1

indeed it will not work. The signature of foundation as a jQuery extension has changed to taking the first argument as the plugin, and the rest parameters as options to the plugin: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.core.js#L250:L284 – Sam Vloeberghs Dec 18 '15 at 15:57

score 23 · Answer 2 · edited Mar 24 '20 at 05:13

23

Chris from ZURB here. There's a couple of ways you can invoke methods on plugins, see: http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use

The easy "new" way now is

$('#exampleModal').foundation('open')

edited Mar 24 '20 at 05:13

rogerdpack

62,887
36
269
388

answered Nov 22 '15 at 20:01

EddieDean

1,806
11
13

I ran into the same issue. I think it was, that the search on the internet referenced directly to the reveal-documentation from foundation 5, not 6. – nodepond Jul 15 '16 at 09:41

score 4 · Answer 3 · answered Jan 04 '16 at 03:26

Both options provided by Juliancwirko & EddieDean are working. But there's a difference.

If you are using "new Foundation" approach and you also have data-options set like: data-options="closeOnEsc: false; closeOnClick: false;" they won't have any effect.

But if you are using foundation('open') they will work.

Zurb Foundation 6 Reveal doesn't work

3 Answers3

Linked