modal-dialogzurb-foundationzurb-reveal

Why is my reveal modal not working?


I want to make a reveal modal, but its not working. I don't know why. This is my code:

<a href="#" class="button tiny" data-reveal-id="myModal">Add Policy</a>

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

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="<?= site_url('assets/js/foundation.min.js'); ?>"></script>
<script src="<?= site_url('assets/js/foundation/foundation.reveal.js'); ?>"></script>

I'm pretty sure my browser loaded the js as it does not show any error in the debugger. I copy paste from foundation docs, but I don't know why this is not working.


Solution

  • Initialise foundation..

    Have this at the end of your body

    enter image description here