CODEWITHSUNDEEP
htmlzurb-foundation
Emilien
Emilien

Reputation: 2761

Reveal modal Foundation6

I'm using Foundation6 and my reveal modal isn't working (there is just a scroll to top when I click on the link)

However I've read the Foundation docs (http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html) !

So this is my code :

<a href="#" class="button green" data-reveal-id="addMusic">
    <i class='fi-plus medium'></i>&nbsp;
    <strong>Ajouter une musique</strong>
</a>

<div id="addMusic" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

I've installed Foundation in command line.

Upvotes: 0

Views: 53

Answers (1)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

You need to be reading the v6 docs for Foundation if you're using it.

This is the modal example: 

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

And the link to open it: 

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

Resolve which version you're using so you can use the proper classes and id's in your particular case.

Upvotes: 1

Related Questions