-2

Foundation's modal is not working for me in my project.

I've confirmed Foundation and jQuery are loaded as well as the CSS for the Foundation Modal to work but it's not triggering on click as is.

Interestingly, if you run

$(document).ready(function(){
    var popup = new Foundation.Reveal($('#videoModal'));
    popup.open();
});

In the browser console, the modal appears. So, I feel confident the js and css are available.

I just can't resolve why the click event on the anchor is not firing it as it should. I've followed the advice on this page: https://foundation.zurb.com/sites/docs/reveal.html

My Test Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Testing Modal from Foundation</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/assets/dist/styles/app.css">
  </head>
  <body>
    <div style="margin-top: 200px;" class="video-callout">
      <a data-open="videoModal">
        <h6>Watch the video</h6>
      </a>
    </div>

    <div class="reveal" id="videoModal" data-reveal>
      <h1>Hey!</h1>
    </div>

    <script src="/assets/dist/scripts/vendor/jquery.min.js"></script>
    <script src="/assets/dist/scripts/vendor/foundation.min.js"></script>
  </body>
</html>
phillipmaddox
  • 372
  • 4
  • 5
  • 16
  • Did you see some JavaScript errors (use F12 browser tools)? – Jeroen Heier Nov 08 '17 at 20:56
  • This is the only error I am seeing in console which I 'believe' is related to a Chrome extension. I do not get any errors while running in Safari and the click still doesn't trigger the modal. What's bizarre to me is that when I add onclick="foo()" to the anchor tag element and define this function: `foo = () => { console.log('clicked!'); new Foundation.Reveal($('#videoModal')).open(); }` It fires the modal. Obviously, that shouldn't be necessary but it suggests that the data-open attribute isn't doing it's job I guess? – phillipmaddox Nov 08 '17 at 21:14

1 Answers1

0
$(document).foundation();

Was left out of the document and that seems to be the main culprit.

phillipmaddox
  • 372
  • 4
  • 5
  • 16