CODEWITHSUNDEEP
modal-dialogzurb-foundationzurb-reveal
Code_Pig
Code_Pig

Reputation: 31

Foundation Reveal Modal will not close

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">&#215;</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>

Upvotes: 1

Views: 1487

Answers (1)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

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

Upvotes: 0

Related Questions