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

CSS Framework Basics Build a Website with Foundation Building the Video Modal Window

Posted by Nino Merdzanovic
Nino Merdzanovic
Courses Plus Student 15,758 Points

Need help with Framework Basics Challenge 4.

Give the img element on line 21 the data attribute that reveals the modal window once the image is clicked. Make sure that its value matches the modal window's ID.

I don't understand this one.. can somebody help me or explain me how to do this?

img class="rnd" id="reveal-modal" src="img/thumb_ribbit.jpg">

5 Answers

Mathieu Delporte
Mathieu Delporte
8,097 Points

Hmm, going on the video, you need to use data-reveal-id="id goes here", using the correct ID of the modal window.

Nino Merdzanovic
Nino Merdzanovic
Courses Plus Student 15,758 Points 
<!DOCTYPE html>
<html>

<head>
  <title>Ribbit - A Treehouse Project</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>

  <!-- Treehouse Content -->
  <div class="row">
    <hr>
    <div class="large-6 hide-for-small columns">
      <h3>Learn how to make this app for yourself</h3>
      <p class="copy-offset">
        We will build on the concepts learned in previous iOS projects to create an app that will allow users to send photo or video messages to other users that will be deleted once viewed.
      </p>
      <div class="row th-copy"> <!-- Nested row -->
        <div class="large-6 columns">
          <img class="rnd" src="img/thumb_ribbit.jpg" data-reveal-id="">
        </div>
        <div class="large-5 pull-1 columns">
          <p><em>Get access to courses for only $24 a month!</em></p>
          <a href="#">Visit Treehouse &raquo;</a>
        </div>
      </div>
    </div>

    <div class="large-6 columns">
      <img class="th-logo" src="img/th-logo.png" alt="logo">
      <p>
        Treehouse provides an extensive library of step-by-step video courses and training exercises that will give you a wide range of in-demand technology skills that will help you land your next dream job.
      </p>
      <div class="row th-copy hide-for-small"> <!-- Nested row -->
        <div class="large-4 columns">
          <img class="circle" src="img/thumb_ben.jpg">
        </div>
        <div class="large-8 columns">
          <p class="teacher-desc th-copy">
            <strong>Ben Jakuben</strong>
            <span>Teacher</span>
          </p>
        </div>
      </div>
    </div>
  </div><!-- End Treehouse Content -->

  <!-- Video Modal -->
  <div id="vidModal" class="reveal-modal">
    <h3>Learn how to make this app!</h3>
    <div>
      <iframe width="420" height="315" src="https://www.youtube.com/embed/hTf0CgRC1_Q" frameborder="0" allowfullscreen></iframe>
    </div>
    <a class="close-reveal-modal">&#215;</a>
  </div><!-- End Video Modal -->

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <script src="js/foundation.min.js"></script>
  <script>
  $(document).foundation();
  </script>
</body>
</html>

I have place the ID data-reveal-id="id goes here".. but what is the ID?

Mathieu Delporte
Mathieu Delporte
8,097 Points

Should be vidModal, it's inside your video modal code.

james white
james white
78,399 Points
james white
james white
78,399 Points

For this Challenge:

http://teamtreehouse.com/library/framework-basics/build-a-website-with-foundation-2/building-the-video-modal-window

Challenge Task 2 of 4

Give the img element on line 21 the data attribute that reveals the modal window once the image is clicked. Make sure that its value matches the modal window's ID.

I passed with:

<img class="rnd" src="img/thumb_ribbit.jpg" data-reveal-id="vidModal" data-reveal>
Mathieu Delporte
Mathieu Delporte
8,097 Points
Mathieu Delporte
Mathieu Delporte
8,097 Points

Try this one:

img src="img/thumb_ribbit.jpg" class="rnd" id="reveal-modal" data-reveal>

Nino Merdzanovic
Nino Merdzanovic
Courses Plus Student 15,758 Points

Hi mate,

Not working still getting the same error.

Nino Merdzanovic
PLUS
Nino Merdzanovic
Courses Plus Student 15,758 Points
Nino Merdzanovic
Nino Merdzanovic
Courses Plus Student 15,758 Points

Thanks mate, i have fixed it ID is vidModal.

Mathieu Delporte
Mathieu Delporte
8,097 Points
Mathieu Delporte
Mathieu Delporte
8,097 Points

Perfect, good luck with the rest!