CODEWITHSUNDEEP
javascriptjqueryzurb-foundation
MeltingDog
MeltingDog

Reputation: 15488

How do I use Foundation 6's Javascript?

I want to utilise Foundation 6's Reveal (modal) plugin.

I have added:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.1/js/plugins/foundation.interchange.min.js"></script>

To my head. These are loading fine - no 404's.

Below them I have added:

<script>
  $(document).foundation();
</script>

Finally, I have added the modal code, copied verbatim from their site:

<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>

<div class="reveal" id="exampleModal1" data-reveal>
 <h1>Awesome. I Have It.</h1>
 <button class="close-button" data-close aria-label="Close modal" type="button">
 <span aria-hidden="true">&times;</span>
 </button>
</div>

However, nothing works.

Inspecting the console I see the error:

Uncaught TypeError: Cannot read property 'Foundation' of undefined

On the foundation.min js, and

Uncaught TypeError: Super expression must either be null or a function, not undefined

on the reveal file.

Anyone know what I could do to fix this?

Upvotes: 3

Views: 1152

Answers (1)

jrswgtr
jrswgtr

Reputation: 2379

You already included all foundation JS with the first script tag. The second two will create a conflict. Also include the foundation CSS. 

<html>
<head>
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.1/js/foundation.min.js"></script>
</head>
<body>
<p>
    <button class="button" data-open="exampleModal1">Click me for a modal</button>
</p>

<div class="reveal" id="exampleModal1" data-reveal>
    <h1>Awesome. I Have It.</h1>
    <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<script>
    jQuery( document ).ready( function ( $ ) {
        $( document ).foundation();
    } );
</script>
</body>
</html>

Upvotes: 3

Related Questions