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

HTML

Posted by Anthony Lockett
Anthony Lockett
24,266 Points

Foundation Framework 5 Modal

I am trying to implement the modal in the foundation framework, and I can not get it to work. I wanted to see it is works so I just copied and pasted the code from foundations website. The code take me to the top but no modal comes up. Here the code. Can someone try to figure this out?

<li><a href="#" data-reveal-id="myModal">SIGN UP</a></li>

<div id="myModal" class="reveal-modal small" 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>

2 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Anthony;

I am assuming you have the relevant JavaScript and jQuery files properly linked in your model.html doc? Along with the relevant Foundation CSS file(s)?

Ken

Anthony Lockett
Anthony Lockett
24,266 Points

Yes I do

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

After testing some modals, here's suggestion to make sure you add Reveal CSS include with Jquery (1.6 higher) file which are missing links. 

<!doctype html>
<html class="no-js" lang="en">
<head>
        <link rel="stylesheet" href="reveal.css">   
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="foundation.reveal.js"></script>

</head>

<body>

<!--Your EXAMPLE -->
<a href="#" data-reveal-id="myModal">SIGN UP</a></li>

<div id="myModal" class="reveal-modal small" 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>

</body>
</html>

You have to download Reveal Zip on right side

Anthony Lockett
Anthony Lockett
24,266 Points

Still doesnt work.

The modal is linked at the bottom of the page. View the page here