Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ziddy
ziddy
3,463 Points

Foundation modal reveal automatically load after refresh

I want to make a modal with flex video, using Foundation 5.

The problem is, the modal automatically load after refresh. I want it to load after clicking the button.

Please help

<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>

<div id="videoModal" class="reveal-modal medium open" data-reveal="" style="visibility: visible; display: block; opacity: 1;">

  <div class="flex-video widescreen vimeo" style="display: block;">
    <iframe src="//player.vimeo.com/video/104300633" width="650" height="366" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>

  <a class="close-reveal-modal">&#215;</a>
</div>

<script src="../js/vendor/jquery.js"></script>
    <script src="../js/foundation/foundation.js"></script>
    <script src="../js/foundation/foundation.reveal.js"></script>
      <script>
    $(document).foundation();
  </script>

1 Answer

Chris Shaw
Chris Shaw
26,676 Points

Hi ziddy,

You appear to have some unneeded code in your HTML that is causing it to appear on load, simply change the below

<div id="videoModal" class="reveal-modal medium open" data-reveal="" style="visibility: visible; display: block; opacity: 1;">

to

<div id="videoModal" class="reveal-modal medium" data-reveal>
ziddy
ziddy
3,463 Points

Thanks Chris! It works. I just copied the line from Foundation docs. Didn't know what does it mean. Need to work hard on Javascript.