1

I was hoping someone would be able to help with this. I can't seem to get the animations for the modal reveal in Foundation 6 working. I've basically copied and pasted it straight from their documentation but nothing. I see others have had issues but none of their solutions seemed to help me.

Here's my complete code.

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <link rel="stylesheet" href="css/themeat.min.css" />
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/app.css">
    </head>
<body>

<p><a data-toggle="animatedModal10">Click me for a modal</a></p>

<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
  <h1>Whoa, I'm dizzy!</h1>
  <p class='lead'>There are many options for animating modals, check out the Motion UI library to see them all</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>


    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>    
    <script src="js/app.js"></script>
    <script src="js/view.js?auto"></script>

<script>
   $(document).ready(function() {
      $(document).foundation();
   })
</script>

    </script>

  </body>
</html>

Any help would be greatly appreciated. :)

Thanks,

Cameron
  • 65
  • 1
  • 8
  • What happens when you click on the button? Are there any JS errors in the console? – Yass May 27 '16 at 12:10
  • Hi Yass - only this > "Tried to initialize reveal on an element that already has a Foundation plugin." but that's from the $(document).foundation(); line of code which I don't think is necessary. I only put it in there because that seemed to work for someone else with the same problem... – Cameron May 27 '16 at 13:51
  • sorry forgot to answer the other part of the question, when i click the button the modal box appears but doesn't animate in or let me click to close it. – Cameron May 27 '16 at 13:52
  • `$(document).foundation()` only needs to be called once. I'm guessing one of your external javascript files is making the call. Remove the additional call and let me know what happens? – Yass May 27 '16 at 13:53
  • Hi Yass - I removed the additional call but I'm getting the same result except this time there's no error in the console. Any clues? – Cameron May 27 '16 at 14:08
  • Not sure, without a live example. Would you be able to create a [fiddle](https://jsfiddle.net) replicating your issue? If not, I'll take a more detailed look later on (after I finish work) – Yass May 27 '16 at 14:55

2 Answers2

2

I think you haven't included the Motion-UI css file, You will need it to animate the modal.

https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css

Please see the working example with code copied from the docs. http://codepen.io/shoaibik/pen/RRwWKg

Shoaib Iqbal
  • 1,208
  • 11
  • 21
0

In Foundation documentation http://foundation.zurb.com/sites/docs/reveal.html, I am seeing they are using data-open attribute in button. I hope you should use data-open instead of data-toggle.

<p><a data-open = "animatedModal10">Click me for a modal</a></p>
Chinmaya Hegde
  • 775
  • 8
  • 21
  • Hey, thanks for getting back to me. I noticed that too but on their animation they don't appear to use it > http://foundation.zurb.com/sites/docs/reveal.html#animations I tried adding it in anyway but doesn't appear to do anything...it's really frustrating! – Cameron May 27 '16 at 13:26