I'm trying to disable Foundation's Reveal animation, but it's still animating.

Here's my fiddle and code:

/

<script>
  $('#videoModal').reveal({  
       animation: 'none' //fade, fadeAndPop, none
  });
</script>

<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
<div id="videoModal" class="reveal-modal large">
  <h2>This modal has video</h2>
  <div class="flex-video">
    <iframe width="800" height="315" src="" frameborder="0" allowfullscreen></iframe>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

I'm trying to disable Foundation's Reveal animation, but it's still animating.

Here's my fiddle and code:

http://jsfiddle/ryanburnett/pSQjj/

<script>
  $('#videoModal').reveal({  
       animation: 'none' //fade, fadeAndPop, none
  });
</script>

<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
<div id="videoModal" class="reveal-modal large">
  <h2>This modal has video</h2>
  <div class="flex-video">
    <iframe width="800" height="315" src="http://www.youtube./embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

• javascript
• modal-dialog
• zurb-foundation

2 Answers 2

Change your JavaScript call to the following:

$(document).foundation('reveal', {animation: 'none'});

Here's the jsFiddle: http://jsfiddle/pSQjj/1/

At least in this jsFiddle, it appears there may be a bug with closing the modal window with animation set to none, whereas it closes correctly if you change the configuration to fade or fadeAndPop. Let me know if you see the same bug in your app and I'll report it to the guys and gals at Zurb.

Change your JavaScript call to the following:

$(document).foundation('reveal', {animation: false});

The problem, is that if you turn the animation off, the modal does not animate to where you are on the page (if you have scrolled down the page) - so do take note of this.