Zurb Foundation 6 Reveal doesn't work
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.
Answer
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.