title: JavaScript Foundation Reveal Modal Rendering
body: <p>Working with JavaScripts foundation plugin, reveal (modal). I am trying to get the very basic modal to work, but I don't think I am calling it correctly. In my vendor directory I have copies of <code>foundation.min.js</code> and <code>foundation.reveal.js</code> and then I am just trying to do work through the first beginner example on the website <a href="http://foundation.zurb.com/sites/docs/reveal.html" rel="nofollow">http://foundation.zurb.com/sites/docs/reveal.html</a>. </p>
  
  <p>my index.html </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Testing Foundation&lt;/title&gt;
      &lt;script type="text/javascript" src="vendor/jQuery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="vendor/foundation.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="vendor/foundation.reveal.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="testing.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;&lt;a data-open="exampleModal1"&gt;Click me for a modal&lt;/a&gt;&lt;/p&gt;
      &lt;div class="reveal" style="visibility: hidden" id="exampleModal1" data-reveal&gt;
        &lt;h1&gt;Awesome. I Have It.&lt;/h1&gt;
        &lt;p class="lead"&gt;Your couch. It is mine.&lt;/p&gt;
        &lt;p&gt;I'm a cool paragraph that lives inside of an even cooler modal. Wins!&lt;/p&gt;
        &lt;button class="close-button" data-close aria-label="Close modal" type="button"&gt;
          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>testing.js</p>
  
  <pre><code>$('#exampleModal1').foundation('open');
  </code></pre>
  
  <p>I am not sure where I am going wrong in my setup for this to work?</p>