Opening and closing a Reveal modal via Javascript

Question

I'm trying to open and close a Reveal modal via Javascript...

I have this HTML

<div class='reveal-modal' id='first-modal' data-reveal>
   I'm the firstborn!
   <a class='open-second'>Click me!</a>
</div>
<div class='reveal-modal' id='second-modal' data-reveal>
   I'm the secondborn!
   <a class='close'>Close modal</a>
</div>
<a class='open-first'>Click me!</a>

And the following Javascript...

// There's no need to close a previous modal before you
// open another one.
$('a.open-first').on('click', function() {
  $('#first-modal').foundation('reveal','open');
});
$('a.open-second').on('click', function() {
  $('#second-modal').foundation('reveal', 'open');
});
$('a.close').on('click', function() {
  $('#second-modal').foundation('reveal', 'close');
});

However, I see the following error...

app.js:16078 Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for Reveal.
    at jQuery.fn.init.foundation (app.js:16078)
    at HTMLAnchorElement.<anonymous> (app.js:14672)
    at HTMLAnchorElement.dispatch (app.js:5026)
    at HTMLAnchorElement.elemData.handle (app.js:4831)

Can anyone out there tell me why this isn't working?

Thanks!

Does this answer your question? [Zurb Foundation 6 Reveal doesn't work](https://stackoverflow.com/questions/33855505/zurb-foundation-6-reveal-doesnt-work) — rogerdpack, Mar 24 '20 at 05:15

score 2 · Answer 1 · answered Jul 30 '18 at 08:12

I managed to find out the answer...

It's just a matter of removing 'reveal', thus...

$('a.open-first').on('click', function() {
  $('#first-modal').foundation('open');
});
$('a.open-second').on('click', function() {
  $('#second-modal').foundation('open');
});
$('a.close').on('click', function() {
  $('#second-modal').foundation('close');
});

Opening and closing a Reveal modal via Javascript

1 Answers1