CharlieAus
CharlieAus

Reputation: 83

how to (properly) include Reveal in foundation?

I can't seem to get reveal to work, I've followed everything to the letter, add the modernizr, add the plugins, add the css (reveal is included in foundation apparently), initialized foundation at the beginning and loaded jquery at the bottom. What am I missing ?

<html>
    <head>
    <script src="js/custom.modernizr.js"></script>
    <script src="js/foundation.min.js"></script>



        <link rel="stylesheet" href="css/foundation.css">
      <link rel="stylesheet" href="css/foundation.min.css">
      <link rel="stylesheet" href="css/normalize.css">

    <script>
      $(function(){
        $(document).foundation();    
      })
    </script>

    </head>
    <body>
    <div id="myModal" class="reveal-modal">
      <h2>Awesome. I have it.</h2>
      <p class="lead">Your couch.  It is mine.</p>
      <p>Im a cool paragraph that lives isnside of an even cooler modal. Wins</p>
      <a class="close-reveal-modal">&#215;</a>
    </div>

            <a href="#" class="big-link" data-reveal-id="myModal" id="my-trigger">
                Fade and Pop
            </a>    

    </body>

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

    </html>

Triggering the modal $('#my-trigger').trigger('click'); like there: Revealing a Modal in Foundation 4 have not helped either.

Upvotes: 0

Views: 352

Answers (1)

gstricklind
gstricklind

Reputation: 484

In my build, the javascript is after the footer (with the exception of modernizr). I created a test page similar to how yours is set up to try to recreate the issue. Try moving

<script src="js/foundation.min.js"></script>

<script>
  $(function(){
    $(document).foundation();    
  })
</script>

to just after your

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

Upvotes: 1

Related Questions