While trying to create a modal using Foundation Reveal, I found that I couldn't close it. Not by using the reveal-modal-close class, not by javascript, nothing was working.
I tried to put this example from the documentation into the page:
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
When the page loads, it's open, but I can't get it to close. Also, not sure why it loads open.
At the bottom of my <body>, I have this:
<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.6.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.reveal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script type="text/js" src="js/modal.js"></script>
<script>
$(document).foundation();
</script>
you don't need to load both foundation.min and foundation.reveal, just load min unless you need only reveal. Also you don't need modal.js - might be a conflict there.
See documentation here and follow it, should work once you fix the above issues: http://foundation.zurb.com/docs/components/reveal.html